> ## Documentation Index
> Fetch the complete documentation index at: https://notikaai.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# How to Set Up Supabase Auth Emails with Dreamlit
> Replace Supabase's default auth emails with branded, production-ready templates. Set up password reset, magic link, and verification emails in 5 minutes.
## How do I set up Supabase Auth emails with Dreamlit?
Supabase's built-in email sender is [not intended for production](https://supabase.com/docs/guides/auth/auth-smtp). It only delivers to team members, enforces strict rate limits, and the templates look generic. If real users need to reset passwords or verify emails, you need a production-ready sender.
Dreamlit replaces all 6 auth email types (password reset, magic link, email confirmation, invite, email change, and reauthentication) in a single click. Connect your Supabase project, click **Setup Supabase Auth**, and Dreamlit generates branded templates with your logo, colors, fonts, and visual style. The Dreamlit email setup takes about 5 minutes.
Setting up auth for your app involves multiple steps, not just the email delivery / template setup part.
While Dreamlit handles the **email delivery and templates** for you, you still need to set up the rest of the flow, including:
* adding a button in your UI which invokes the appropriate Supabase Auth API to trigger the auth email event
* configuring redirect URLs in Supabase
* handling auth links or codes after the user opens the email (if you're using magic link signin)
## Who is this guide for?
* **Supabase users** who need auth emails that work beyond the development phase
* **Vibe coders** using Lovable, Bolt, or Cursor who hit the rate limit wall
* **Anyone frustrated** with Supabase's default templates and ready for a 5-minute fix
## What will I set up?
* A Supabase Auth Hook that routes auth email events to Dreamlit
* 6 auth email workflows: password reset, magic link, email confirmation, invite, email change, and reauthentication
* Branded templates with your logo, colors, fonts, and visual style
* Production-ready email delivery that works at scale
This guide does not cover setting up the rest of auth flow for your app: i.e. calling Supabase Auth APIs, configuring redirect URLs, PKCE, and handling auth links or codes after the user opens the email.
You can customize colors, logos, fonts, and visual style with [Brand Styles](/docs/configuration/email/brand-styles).
## What do I need before starting?
* A Supabase project using Supabase Auth
* App code that already incorporates the auth UX for your users (like a "Forgot Password" button or "Sign up" flow), including calling Supabase Auth APIs such as `signInWithOtp()`, `signUp()`, or `resetPasswordForEmail()` which triggers the auth email events
* For link-based auth: a working web callback URL or native deep link in your app, plus the same URL allowed in Supabase URL Configuration
* A decision between clickable auth links and six-digit email codes if you're using magic link signin
***
## How do I set this up as a new Dreamlit user?
Go to [app.dreamlit.ai](https://app.dreamlit.ai) and sign up.
During onboarding, click **Connect Supabase** and authorize the connection.
After connecting, you'll be prompted to set up auth emails. Click **Setup Supabase Auth**.
This creates 6 workflows (password reset, magic link, confirm email, etc.) with branded templates. [What this does →](/docs/configuration/data-sources/supabase#supabase-auth-emails)
Dreamlit is now handling your auth email delivery. See [Testing your setup](#testing-your-setup) below to verify the email sends and the auth flow works in your app.
## How do I set this up as an existing Dreamlit user?
Go to **Settings → Database Connections** and click on your Supabase connection.
Click **Setup Supabase Auth**.
This creates 6 workflows (password reset, magic link, confirm email, etc.) with branded templates. [What this does →](/docs/configuration/data-sources/supabase#supabase-auth-emails)
Dreamlit is now handling your auth email delivery. See [Testing your setup](#testing-your-setup) below to verify the email sends and the auth flow works in your app.
***
## What does Dreamlit handle?
Dreamlit handles the email side of Supabase Auth:
* installs the Supabase Auth Hook
* creates the Dreamlit workflows for each auth email type
* sends branded auth emails when Supabase emits an auth email event
* exposes Supabase auth variables such as `ConfirmationURL`, `Token`, `TokenHash`, `SiteURL`, `RedirectTo`, and `Email` in your workflow
Your app and Supabase project still control the login experience:
* your app must call the right Supabase Auth method
* Supabase must allow the redirect URL you pass from your app
* web apps must handle the callback route
* native apps must handle deep links or universal links
* if you use PKCE, the app must complete the code exchange on the same browser or device where the auth flow started
Dreamlit does not implement sign-up, sign-in, password reset screens, app deep links, or Supabase redirect URL settings for you. It sends the auth emails that Supabase asks it to send.
## What Supabase settings do I still need?
For auth links to work, your Supabase project must trust the URLs your app uses.
In Supabase, go to **Authentication -> URL Configuration** and check:
* **Site URL** points to your production app, not a local development URL
* **Redirect URLs** includes every web callback URL, native deep link, or universal link your app passes to Supabase
* Your app passes that URL when calling Supabase Auth, for example with `emailRedirectTo` or `redirectTo`
* Native apps have the matching URL scheme or universal link configured in the app itself
If an email arrives but clicking the link does not sign the user in, Dreamlit delivery is working. The next place to check is your Supabase redirect allow-list and your app's callback or deep-link handler.
## Should I use magic links or six-digit codes?
Supabase uses `signInWithOtp()` for both magic links and email codes. The difference is the email template.
| Approach | What the email shows | Best for |
| -------------- | ----------------------- | ------------------------------------------------------------------------------- |
| Magic link | `{{ ConfirmationURL }}` | Web apps, or native apps with deep links already set up |
| Six-digit code | `{{ Token }}` | Native apps, cross-device sign-in, or flows where users enter a code in the app |
Supabase usually sends both `Token` and the data Dreamlit uses to build `ConfirmationURL` in the same auth hook payload. Do not treat `Token` existing as proof that the user should see a six-digit code. Choose the email template based on what your app supports.
Dreamlit's default **Magic Link** workflow uses `{{ ConfirmationURL }}`. To use a six-digit code instead:
In Dreamlit, open the workflow named **Magic Link**.
Replace the button/link copy that uses `{{ ConfirmationURL }}` with code-focused copy that shows `{{ Token }}`.
In your app, collect the code and verify it with Supabase Auth, for example with `verifyOtp()` or the equivalent method in your Supabase client library.
For native iOS or Android apps, six-digit codes are often simpler than magic links because users can open the email on any device and type the code into the app. Magic links can still work, but you need deep linking and redirect handling.
You can also show both a link and a code if your app supports both paths. In that case, keep the link pointed at `{{ ConfirmationURL }}` and show the code below it in the email template with `{{ Token }}`.
## How do magic links work in native apps?
For iOS, Android, React Native, Flutter, or Expo apps, a magic link needs to open your app after Supabase verifies the email link. That usually means:
1. Configure a custom URL scheme or universal link for your app
2. Add that URL to **Authentication -> URL Configuration** in Supabase
3. Pass that URL when calling `signInWithOtp()` with `emailRedirectTo` or `redirectTo`
4. Handle the incoming link in your app
5. Complete the Supabase session exchange in the app
If you are using PKCE, Supabase redirects back with an auth code. That code must be exchanged for a session using the locally stored code verifier. Because that verifier is stored where the flow started, the exchange must happen on the same browser or device.
If that sounds like more auth plumbing than you want for a native app, use the six-digit code approach above.
Supabase's docs have the implementation details: [Redirect URLs](https://supabase.com/docs/guides/auth/redirect-urls), [Mobile Deep Linking](https://supabase.com/docs/guides/auth/native-mobile-deep-linking), [PKCE flow](https://supabase.com/docs/guides/auth/sessions/pkce-flow), and [Passwordless email logins](https://supabase.com/docs/guides/auth/auth-email-passwordless).
***
## How do I test my auth emails?
Once your auth emails are configured, verify they're working:
1. **Trigger a password reset** from your app—call `supabase.auth.resetPasswordForEmail()` or use your app's "Forgot Password" flow
2. **Check your inbox** within a few seconds for a branded email
3. **Verify the auth flow works** by clicking the link or entering the code in your app
To test other auth emails, trigger the corresponding Supabase Auth method:
* **Magic link**: `supabase.auth.signInWithOtp()`
* **Six-digit code**: `supabase.auth.signInWithOtp()` with a Magic Link template that shows `{{ Token }}`
* **Email confirmation**: `supabase.auth.signUp()`
* **Invite**: Send an invite from your Supabase dashboard
***
## FAQ
### Why aren't my emails arriving?
1. **Check spam/junk folders**: new sender domains sometimes get filtered initially
2. **Verify the connection is active** in Settings → Database Connections
3. **Make sure you're calling the right Supabase method** — auth emails only trigger from [Supabase Auth API](https://supabase.com/docs/reference/javascript/auth-api) calls, not database changes
### Why am I still receiving old Supabase templates?
First, check that Supabase Auth is connected: go to **Settings → Database Connections** and look for the "Supabase Auth" badge on your connection. If it's missing, click the connection and run **Setup Supabase Auth** again.
If the badge is there but you're still getting old templates, the Auth Hook may not be configured correctly in Supabase. Go to your [Supabase dashboard](https://supabase.com/dashboard) → Authentication → Hooks and verify Dreamlit's hook is enabled.
### Why aren't my auth links working?
If password reset or magic link emails arrive but the links don't work as expected, the email delivery is probably working. The issue is usually in your app's Supabase redirect or callback handling.
Check these first:
* Your `redirectTo` or `emailRedirectTo` value is allowed in Supabase URL Configuration
* Your Supabase **Site URL** is set to your production app
* Your web callback route or native deep link opens the right app screen
* Your app exchanges the returned code or token for a Supabase session
* If you use PKCE, the link is opened on the same browser or device where the flow started
For native apps, you can avoid most link-handling complexity by using a six-digit code with `{{ Token }}` instead of a magic link.
### How do I show a six-digit code instead of a magic link?
Open the **Magic Link** workflow in Dreamlit and edit the email step. Replace the button that points to `{{ ConfirmationURL }}` with code copy that shows `{{ Token }}`.
Then update your app so users can enter that code and verify it with Supabase Auth. Supabase calls both flows "OTP" in the API, so `signInWithOtp()` can trigger either a magic link or a code depending on the email template.
Do not make this decision by checking whether `Token` is present. Supabase can provide both `Token` and link data for the same event. The right choice is whichever flow your app actually implements.
### Can I customize individual email templates?
Yes. Each auth email has its own workflow in Dreamlit. Open the workflow, click on the email step, and edit the template directly or ask the AI to make changes for you.
***
## How do I send from my own domain?
By default, auth emails send from Dreamlit's domain. To send from your own domain (like `hello@yourapp.com`), [set up your email domain](/docs/configuration/email/custom-domain).
***
## Next steps
Full reference for Supabase setup
Send from your own domain
Preview emails before going live
What else you can build
## References
* [Supabase Auth SMTP docs](https://supabase.com/docs/guides/auth/auth-smtp)
* [Supabase Auth redirect URLs](https://supabase.com/docs/guides/auth/redirect-urls)
* [Supabase mobile deep linking](https://supabase.com/docs/guides/auth/native-mobile-deep-linking)
* [Supabase PKCE flow](https://supabase.com/docs/guides/auth/sessions/pkce-flow)
* [Supabase passwordless email logins](https://supabase.com/docs/guides/auth/auth-email-passwordless)
* [Supabase Auth API reference](https://supabase.com/docs/reference/javascript/auth-api)
* [Dreamlit Supabase integration](/docs/configuration/data-sources/supabase)
***
Last validated: 2026-04-29