Creating An Authentication Flow With Remix and Supabase Tutorial

Aaron K Saunders - Dec 1 '21 -

- Dev Community

Simple application showing authentication flow and session management using react Remix and Supabase

This application show how to create a user and authenticate in Remix using Supabase as the backend. We show how Actions and Loaders work to manager working with server for data and to make API calls. Most of the heavy lifting is managed by using the Remix Session APIs which help to manage the Supabase Session.

Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience.

Video

Source Code

aaronksaunders / supabase-remix-auth

Welcome to Remix Supabase Authentication Flow Tutorial - Updated To work with Remix 1.5.1

The newest branch also on the head / main

Videos

Part 1 Is Here: https://www.youtube.com/watch?v=-KiH8feOHSc

Simple application showing authentication flow and session management using react remix and supabase

Part 2 Is Here: https://youtu.be/ySQcGc9NICo

How To Upload to Storage Buckets and Write Data with Remix and Supabase

Documentation

Remix Docs = Supabase Docs

Development

From your terminal:

npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

DIY

If you're familiar with deploying node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of remix build

build/
public/build/

Using a Template

When you ran npx create-remix@latest there…

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .