User Auth w/ Remix + Supabase + Resend

Auth is annoying. Auth is stupid. And auth is something we should never roll. So let me tell you the lazy man's way of setting this up.

Let’s make this read as simple and easy as possible. Here is what you need to do.

1. Make a React application!

2. Create a supabase instance.

3. Make a SMTP server instance using a provider such as Resend.

4. Connect your javascript / typescript code to supabase using the supabase-sdk to make authentication requests

5. Configure Supabase to connect to Resend

6. Configure Email Template for Supabase to send out

This will all accumulate to create a user flow that looks like this:

---

That probably sounds like a lot… Let’s go through the steps in greater detail :D

1.Making a React app. This one is actually trivial. Run this or another specific command found from this documentation.

npx create-react-app

2. Create a Supabase instance:

   

   Set up a new Supabase project with default settings. You'll need to use a form of Postgres and choose a region that makes sense geographically for your project (most regions should work for most projects).

3. Set up an SMTP server instance:

   Using a provider such as Resend. Resend will give you an API key which you will be using in Supabase.

   

4. Connect your JavaScript/TypeScript code to Supabase:

   Use the supabase-js SDK to make authentication requests. Connect this to your frontend to enable sign-up and authentication functionality in your app.

   

5. Configure Supabase to connect to Resend:

   Now we have to go into our Supabase settings and set the following configuration. Remember that API key from Resend? That will be used as our password in the SMPT provider settings. The username should be “resend” and the host should be “smtp.resend.com”.

   

6. Configure an email template:

   If you are familiar with html, this should be easy. All you have do is structure a custom message that will display in your emails. Consider this example:

   

   This will send as an email that looks like this:

   

   Clicking this link will confirm your account. Now the user can return to any valid sign in page for your application ( supabase-sdk compliant ) and be able to authenticate into your application.

Thanks for reading :D