Sign up and Sign in

This guide outlines how to configure both Sign Up and Sign In options for your React Native Supabase AI template. The template offers flexible methods for user authentication, including Magic Link, and Email/Password, allowing you to tailor the user experience.

Sign-Up Configuration

The React Native Supabase AI template provides three primary options for user sign-up:

  1. Magic Link: Users receive a one-time password (OTP) on email.
  2. Email and Password: Traditional email and password sign-up.

Update Configurations in template

Configure the client-side sign-up/sign-in options by editing the react-native/config/index.ts file.

providers: {
    magicLink: true,  // Enables Magic Link sign-up
    emailPassword: true,  // Enables Email and Password sign-up
}

Supabase Configurations

To enable authentication features in your local Supabase environment, edit the supabase/config.toml file created after running supabase init.

Enable Supabase authentication by setting the following flag in the [auth] section:

[auth]
enabled = true

To enable sign-ups via email and password, modify the [auth.email] section as follows:

[auth.email]
enable_signup = true
  • Restart Supabase

After making changes to supabase/config.toml, restart your local Supabase environment with the following commands:

npm run supabase:stop
npm run supabase:start

Verify Sign-Up Setup

Open app to test the sign-up or sign-in functionality:

Sign-In Configuration

Sign-in options mirror the sign-up methods and use the same configurations. Users can sign in using:

  1. Magic Link
  2. Email and Password

Client Side Configurations

The same configurations in react-native/config/index.ts directory for sign-up methods apply to sign-in as well. Ensure that the proper methods are enabled in the providers section.

Supabase Configurations

Ensure the supabase/config.toml file remains correctly configured for sign-in, similar to the sign-up configurations outlined above.

Verify Sign-In Setup

Open app to test the sign-in functionality

By following these steps, you'll have a fully functional authentication system with customizable options for your users. Both sign-up and sign-in flows will be ready with Magic Link and Email/Password methods.

On this page