GPT

Correct Authentication Components

// app/routes/auth.tsx import { json, redirect, type ActionFunctionArgs } from '@remix-run/node' import { Form, useActionData, useOutletContext } from '@remix-run/react' import { createSupabaseServerClient } from '~/util

Prompt text

Original English text. Replace placeholders with your own details.

// app/routes/auth.tsx
import { json, redirect, type ActionFunctionArgs } from '@remix-run/node'
import { Form, useActionData, useOutletContext } from '@remix-run/react'
import { createSupabaseServerClient } from '~/utils/supabase.server'

export async function action({ request }: ActionFunctionArgs) {
 const response = new Response()
 const supabase = createSupabaseServerClient({ request, response })
 const formData = await request.formData()
 const intent = formData.get('intent')

 try {
 if (intent === 'signup') {
 const { error } = await supabase.auth.signUp({
 email: formData.get('email') as string,
 password: formData.get('password') as string
 })
 if (error) throw error
 } else if (intent === 'signin') {
 const { error } = await supabase.auth.signInWithPassword({
 email: formData.get('email') as string,
 password: formData.get('password') as string
 })
 if (error) throw error
 } else if (intent === 'signout') {
 const { error } = await supabase.auth.signOut()
 if (error) throw error
 }

 return redirect('/', {
 headers: response.headers
 })
 } catch (error) {
 return json(
 { error: error.message },
 {
 status: 400,
 headers: response.headers
 }
 )
 }
}

export default function Auth() {
 const { session } = useOutletContext()
 const actionData = useActionData<typeof action>()

 if (session) {
 return (
 <Form method="post">
 <p>Welcome, {session.user.email}</p>
 <button type="submit" name="intent" value="signout">
 Sign Out
 </button>
 </Form>
 )
 }

 return (
 <div>
 {actionData?.error && <p>{actionData.error}</p>}
 <Form method="post">
 <input
 type="email"
 name="email"
 placeholder="Email"
 required
 />
 <input
 type="password"
 name="password"
 placeholder="Password"
 required
 />
 <button type="submit" name="intent" value="signin">
 Sign In
 </button>
 <button type="submit" name="intent" value="signup">
 Sign Up
 </button>
 </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 →