Remix Supabase Auth

Bare minimum and un-opinionated example using Remix to implement Supabase's email/password and oAuth

Features

• Signin and Register using Supabase's email/password, Google, and Facebook auth
• Change and reset password logic implemented
• Integration for all oAuth providers that Supabase supports
• Easily enable any oAuth provider - see extend section
• Persist user with HTTP cookie
• Refresh token logic implemented
• Bare minimum and un-opinionated
• main branch is Typescript but you can access JavaScript project in js branch

Quick Start

• Create Supabase project (skip if you already have one):
  • Create Supabase account
  • Create an Organization and a project
• Visit API settings page of your project by either going to https://app.supabase.io/project/<your-project-id>/settings/api or clicking on the Settings on the left sidebar > click on API under Project settings. You'll find your anon_key and URL on that page, which will be used in the next step.
• Clone this example and rename/copy .env.example to .env and add SUPABASE_ANON_KEY, and SUPABASE_URL
• Add your Google and Facebook client ID and secret to your Supabase project, follow the steps mentioned in the Supabase's documentation for Google and Facebook
• Install npm dependencies by running npm i/npm install

Development

• run the development server with npm run dev

What you'll get?

Register - Register using email/password or continue with Google/Facebook social authentications

Login - Login using email/password or continue with Google/Facebook social authentications. When logging in using a Google/Facebook account that is not registered in Supabase, Supabase will create a new account with that email

Forgot Password - Takes user's email and sends a password reset email using supabase.auth.api.resetPasswordForEmail

Auth Callback - Handles the callback from Supabase when oAuth providers are used to login or register. This route uses supabase.auth.onAuthStateChange to get the access and refresh tokens from the url and then it submits the FormData to create session on the server. Handles SIGNED_IN and PASSWORD_RECOVERY both

Profile - Only accessible when logged in, otherwise throws an error which is caught by Remix's CatchBoundary and asks user to login. Once logged in, it'll show the User object that is returned from Supabase

Change Password - Takes in password and confirm-password to update user's password. This route requires user to be logged in or being redirected from auth.callback.tsx with the auth cookie in the flow of PASSWORD_RECOVERY

Logout - Logs user out of the local session and Supabase session. It is an api/resource route because it doesn't export a JSX element

Extend Implementation

Add other oAuth providers

• Simply add the client ID and secret to Supabase for the provider that you want to support.
• In login.tsx and register.tsx add the <AuthProviderBtn provider={YourProvider} redirectTo={redirectTo} /> and that's it!

Questions?

Please feel free to hit me up on Twitter or opening an Issue

License

© 2022 Arpit Dalal. Released under MIT license