dijonmusters / build-a-realtime-chat-app-with-remix-and-supabase

This repo accompanies a free egghead course demonstrating how to build a realtime chat app with Remix and Supabase

Build a Realtime Chat App with Remix and Supabase

This repo accompanies this free egghead course.

🔍 About

Supabase is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes.

We will learn about:

• loaders and actions in Remix
• querying and mutating data with Supabase
• authentication with GitHub
• authorization with RLS
• merging client and server state with realtime events
• deploying a Remix app to Vercel

This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

Check out the Extensions section for ideas of how you can continue your learning journey after this course.

🎓 Instructor

Jon Meyers is a Software Engineer, Educator and Hip Hop Producer from Melbourne, Australia. He's passionate about web development and enabling others to build amazing things! He is currently working as a Developer Advocate at Supabase, showing just how awesome (and not that scary 👻) databases can be!

Jon's courses at egghead.

Follow Jon Meyers on Twitter and subscribe to his YouTube channel.

🗺 Table of Contents

1. Create Supabase project
2. Create Remix application
3. Query Supabase data with Remix Loaders
4. Generate TypeScript types from Supabase CLI
5. Implement Supabase Auth using GitHub
6. Restrict access with RLS policies
7. Automatically set session cookie with Supabase Auth Helpers
8. Call active Loaders on Supabase Auth state change
9. Mutate Supabase data with Remix Actions
10. Subscribe to database changes with Supabase Realtime
11. Deploy Remix app to Vercel

build-a-realtime-chat-app-with-remix-and-supabase's Issues

Access token missing when gen'ing ts types

In Section 4, i got an error when running supabase gen types typescript --project-id ...

Error: Access token not provided. Supply an access token by running supabase login or setting the SUPABASE_ACCESS_TOKEN environment variable.

Not sure if i missed a step. An running terminal outside of VS Code, but that shouldn't matter. I just copied the types from GH.

"You are trying to use a blocker on a POP navigation to a location that was not created by @remix-run/router. This will fail silently in production."

There's an error I can't quite figure out.

It pops up when I try to login with GitHub, or anything.

I get

You are trying to use a blocker on a POP navigation to a location that was not created by @remix-run/router. This will fail silently in production. This can happen if you are navigating outside the router via window.history.pushState/window.location.hash instead of using router navigation APIs. This can also happen if you are using createHashRouter and the user manually changes the URL.

The details are here. My repo is here.

Could anybody please take a look?