GPT

Authentication Route (app/Routes/Auth.tsx)

import { json, redirect } from '@remix-run/node'; import { Form, useActionData, useLoaderData } from '@remix-run/react'; import { auth } from '~/services/firebase.client'; import { adminAuth } from '~/services/firebase.s

Prompt text

Original English text. Replace placeholders with your own details.

import { json, redirect } from '@remix-run/node';
import { Form, useActionData, useLoaderData } from '@remix-run/react';
import { auth } from '~/services/firebase.client';
import { adminAuth } from '~/services/firebase.server';
import { signInWithEmailAndPassword, createUserWithEmailAndPassword } from 'firebase/auth';
import { getSession, commitSession } from '~/services/session.server';

export async function loader({ request }) {
 const session = await getSession(request.headers.get('Cookie'));
 if (session.has('userId')) {
 return redirect('/dashboard');
 }
 return json({});
}

export async function action({ request }) {
 const formData = await request.formData();
 const action = formData.get('action');
 const email = formData.get('email');
 const password = formData.get('password');

 try {
 let userCredential;
 if (action === 'login') {
 userCredential = await signInWithEmailAndPassword(auth, email, password);
 } else {
 userCredential = await createUserWithEmailAndPassword(auth, email, password);
 }

 // Create session
 const session = await getSession();
 session.set('userId', userCredential.user.uid);

 return redirect('/dashboard', {
 headers: {
 'Set-Cookie': await commitSession(session)
 }
 });
 } catch (error) {
 return json({ error: error.message }, { status: 400 });
 }
}

export default function Auth() {
 const actionData = useActionData();
 const loaderData = useLoaderData();

 return (
 <div>
 <Form method="post">
 <div>
 <label htmlFor="email">Email:</label>
 <input
 id="email"
 name="email"
 type="email"
 required
 />
 </div>
 <div>
 <label htmlFor="password">Password:</label>
 <input
 id="password"
 name="password"
 type="password"
 required
 />
 </div>
 <div>
 <button type="submit" name="action" value="login">
 Login
 </button>
 <button type="submit" name="action" value="register">
 Register
 </button>
 </div>
 {actionData?.error && (
 <p className="error">{actionData.error}</p>
 )}
 </Form>
 </div>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →