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
- 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 injs
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/
or clicking on the/settings/api Settings
on the left sidebar > click onAPI
underProject settings
. You'll find youranon_key
andURL
on that page, which will be used in the next step.
- Clone this example and rename/copy
.env.example
to.env
and addSUPABASE_ANON_KEY
, andSUPABASE_URL
- Add your Google and Facebook
client ID
andsecret
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
oryarn
Development
- run the development server with
npm run dev
oryarn 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
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
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
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
andsecret
to Supabase for the provider that you want to support. - In
login.tsx
andregister.tsx
add the
Questions?
Please feel free to hit me up on Twitter or opening an Issue
License
MIT