Password Based Auth flow for React Router and Supabase

Install it

Source

1import { type EmailOtpType } from '@supabase/supabase-js'
2import { redirect, type LoaderFunctionArgs } from 'react-router'
3 
4import { createClient } from '@/registry/default/clients/react-router/lib/supabase/server'
5 
6export async function loader({ request }: LoaderFunctionArgs) {
7  const requestUrl = new URL(request.url)
8  const token_hash = requestUrl.searchParams.get('token_hash')
9  const type = requestUrl.searchParams.get('type') as EmailOtpType | null
10  const _next = requestUrl.searchParams.get('next')
11  const next = _next?.startsWith('/') ? _next : '/'
12 
13  if (token_hash && type) {
14    const { supabase, headers } = createClient(request)
15    const { error } = await supabase.auth.verifyOtp({
16      type,
17      token_hash,
18    })
19    if (!error) {
20      return redirect(next, { headers })
21    } else {
22      return redirect(`/auth/error?error=${error?.message}`)
23    }
24  }
25 
26  // redirect the user to an error page with some instructions
27  return redirect(`/auth/error?error=No token hash or type`)
28}

What it pulls in

npm packages

• @supabase/ssr@latest
• @react-router/dev@latest
• @react-router/fs-routes@latest
• @supabase/supabase-js@latest

Other registry items

• button
• card
• input
• label

Files it writes

• registry/default/blocks/password-based-auth-react-router/app/routes/auth.confirm.tsx
• registry/default/blocks/password-based-auth-react-router/app/routes/auth.error.tsx
• registry/default/blocks/password-based-auth-react-router/app/routes/forgot-password.tsx
• registry/default/blocks/password-based-auth-react-router/app/routes/login.tsx
• registry/default/blocks/password-based-auth-react-router/app/routes/logout.tsx
• registry/default/blocks/password-based-auth-react-router/app/routes/protected.tsx
• registry/default/blocks/password-based-auth-react-router/app/routes/sign-up.tsx
• registry/default/blocks/password-based-auth-react-router/app/routes/update-password.tsx
• registry/default/blocks/password-based-auth-react-router/app/routes.ts
• registry/default/clients/react-router/lib/supabase/client.ts
• registry/default/clients/react-router/lib/supabase/server.ts