Auth & email setup

Use this when you want the contact form, Supabase auth, and Resend newsletter contacts to work for real.

The kit can include:

• Contact form email delivery with Resend.
• Supabase auth: email + password, magic link, and Google / GitHub / Apple sign-in, plus password reset.
• A protected /app zone (/login, /register, /forgot-password are the auth screens).
• Automatic Resend Contact sync after a user signs in.

1. Create .env

Copy .env.example to .env.

Start the dev server:

pnpm dev

Set VITE_SITE_URL to the exact origin printed in the terminal:

VITE_SITE_URL=http://localhost:5173

If Vite prints http://localhost:5174/ or another port, use that origin instead. Restart the dev server after changing .env.

2. Configure Supabase auth

1. Create a Supabase project.
2. In Supabase, open Project Settings -> API.
3. Copy the project URL into VITE_SUPABASE_URL.
4. Copy the anon/public key into VITE_SUPABASE_ANON_KEY.
5. Open Authentication -> URL Configuration.
6. Set Site URL to the exact VITE_SITE_URL.
7. Add this redirect URL, using the same origin:

http://localhost:5173/auth/callback

If your dev server uses another port, change the redirect URL to match.

After deploying, add your production callback too:

https://yourdomain.com/auth/callback

Open Authentication -> Providers -> Email. This single provider powers both auth methods the kit's /login and /register screens offer:

• Email + password — enabled by default. Leave "Confirm email" on (Supabase default) and new sign-ups receive a confirmation link before their first session.
• Magic link — make sure Email OTP is enabled.

Password reset (the /forgot-password screen) works out of the box once the Email provider is on; the reset link returns to /auth/callback.

Useful docs:

• Supabase redirect URLs

3. Configure Google sign-in

1. Open Authentication -> Providers -> Google in Supabase.
2. Copy the callback URL shown there. It usually looks like https://your-project-ref.supabase.co/auth/v1/callback.
3. In Google Auth Platform, create an OAuth client with application type Web application.
4. Add your app origin under Authorized JavaScript origins, for example http://localhost:5173 and your production domain.
5. Add the Supabase callback URL under Authorized redirect URIs.
6. Copy the Google Client ID and Client Secret back into Supabase's Google provider settings.
7. Enable the Google provider.

GitHub and Apple

The /login and /register screens also have GitHub and Apple buttons. They follow the same pattern as Google: open Authentication -> Providers -> GitHub (or Apple) in Supabase, create an OAuth app on the provider side, point its callback at the Supabase callback URL, and paste the client id/secret back into Supabase. Only the providers you enable will work; the rest return an error on click.

Useful docs:

• Supabase Google auth
• Supabase GitHub auth
• Supabase Apple auth

4. Configure Resend email delivery

The /contact page is wired to Resend. Add these values to .env:

RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxx
CONTACT_TO_EMAIL=you@yourdomain.com
CONTACT_FROM_EMAIL="Your site <contact@yourdomain.com>"

In Resend:

1. Create an API key.
2. Verify the sending domain used by CONTACT_FROM_EMAIL.
3. Make sure CONTACT_FROM_EMAIL uses an address from that verified domain.
4. Restart the dev server after changing .env.

5. Configure Resend contacts for newsletters

To add every signed-in Supabase user to Resend Contacts, create a Segment in Resend and set:

RESEND_SEGMENT_ID=seg_xxxxxxxxxxxxxxxxxxxxxxxxx

For newsletter subscription preferences, create a Topic in Resend and set:

RESEND_TOPIC_ID=topic_xxxxxxxxxxxxxxxxxxxxxxxxx

Only set RESEND_TOPIC_ID if users should be opted into that Topic when they register. When RESEND_API_KEY and RESEND_SEGMENT_ID or RESEND_TOPIC_ID are present, the app adds the user's email to Resend after magic link or Google sign-in. Existing contacts are synced to the Segment/Topic so repeat sign-ins do not fail auth.

Useful docs:

• Resend Contacts API
• Resend Segments
• Resend Topics

6. Test the setup

1. Restart the dev server after editing .env.
2. Visit /contact and submit a test message.
3. Visit /login, sign in with a magic link or email + password, then open /app.
4. If Google / GitHub / Apple are enabled, test those buttons too.
5. In Resend, confirm the signed-in email appears in Contacts and the configured Segment/Topic.

Before Supabase is configured, /login shows an "env missing" notice and /app redirects to /login — there is no demo session.

Production checklist

Before going live:

• Set VITE_SITE_URL to your production origin.
• Add https://yourdomain.com/auth/callback to Supabase redirect URLs.
• Add your production origin to Google OAuth Authorized JavaScript origins.
• Keep the Supabase callback URL in Google OAuth Authorized redirect URIs.
• Use a verified production sender domain in Resend.