More Premium Hugo Themes Premium React Themes

Remix Supabase Auth

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

Remix Supabase Auth

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

Author Avatar Theme by arpitdalal
Github Stars Github Stars: 27
Last Commit Last Commit: Jan 18, 2025 -
First Commit Created: Jan 15, 2024 -
Remix Supabase Auth screenshot

Overview:

The product is a minimal and un-opinionated example using Remix to implement Supabase’s email/password and OAuth authentication. It allows users to register and sign in using Supabase’s email/password, Google, and Facebook authentication. The product also includes logic for changing and resetting passwords, integration with all OAuth providers supported by Supabase, persistence of user data with HTTP cookies, and token refresh logic.

Features:

  • Sign in and Register: Users can sign in or register using Supabase’s email/password, Google, and Facebook authentication.
  • Change and Reset Password: Users can change their password and request a password reset through Supabase’s API.
  • Integration with OAuth Providers: The product integrates with all OAuth providers supported by Supabase.
  • Enable any OAuth Provider: Users can easily enable any OAuth provider by following the instructions provided.
  • Persistence with HTTP Cookie: User data is persisted using an HTTP cookie.
  • Refresh Token Logic: The product includes logic for refreshing tokens.

Installation:

To install the theme, follow these steps:

  1. Create a Supabase project. If you already have one, you can skip this step.

    • Create a Supabase account.
    • Create an Organization and a project.
    • Visit the API settings page of your project by going to https://app.supabase.io/project/<your-project-id>/settings/api or clicking on “Settings” on the left sidebar, then clicking on “API” under Project settings.
    • Find your anon_key and URL on that page, as they will be used in the next step.
  2. Clone this example and rename/copy .env.example to .env.

    • Add SUPABASE_ANON_KEY and SUPABASE_URL to the .env file.
  3. Add your Google and Facebook client ID and secret to your Supabase project. Follow the steps mentioned in Supabase’s documentation for Google and Facebook.

  4. Install the npm dependencies by running npm i or npm install.

  5. Run the development server with npm run dev.

Summary:

The product is a minimal and un-opinionated example using Remix to implement Supabase’s authentication features. It allows users to register and sign in using Supabase’s email/password, Google, and Facebook authentication. The product also includes logic for changing and resetting passwords, integration with various OAuth providers, persistence of user data using an HTTP cookie, and token refresh logic. The installation process involves creating a Supabase project, setting up the necessary credentials, and running the development server.