Configuration

Ensure Supabase is running

Ensure your Supabase instance (local or cloud) is up and running.

TurboStarter supports three different authentication methods:

Password - the traditional email/password method, set to true by default
Magic Link - magic link, set to false by default
oAuth - oAuth providers, Google and Github are set up by default

The authentication configuration is set at apps/mobile/config/auth.ts.

The recommendation is to not update this directly - instead, please define the environment variables and override the default behavior.

apps/mobile/config/auth.ts

import { SOCIAL_PROVIDER, authConfigSchema } from "@turbostarter/auth";
 
import { env } from "~/lib/env";
 
import type { AuthConfig } from "@turbostarter/auth";
 
export const authConfig = authConfigSchema.parse({
  providers: {
    password: env.EXPO_PUBLIC_AUTH_PASSWORD === true,
    magicLink: env.EXPO_PUBLIC_AUTH_MAGIC_LINK === true,
    oAuth: [SOCIAL_PROVIDER.GOOGLE, SOCIAL_PROVIDER.GITHUB],
  },
}) satisfies AuthConfig;

The configuration is also validated using the Zod schema, so if something is off, you'll see the errors.

For example, if you want to switch from password to magic link, you'd set the following environment variables:

.env.local

EXPO_PUBLIC_AUTH_PASSWORD=false
EXPO_PUBLIC_AUTH_MAGIC_LINK=true

Third party providers

To display third-party providers in the UI, you need to set the oAuth array to include the provider you want to display. The default is Google and Github.

apps/web/config/auth.ts

providers: {
    ...
    oAuth: [SOCIAL_PROVIDER.GOOGLE, SOCIAL_PROVIDER.GITHUB],
    ...
},

The configuration is done on Supabase's side - not on TurboStarter's side.

Third Party providers need to be configured, managed and enabled fully on the provider's and Supabase's side. TurboStarter does not need any configuration (beyond setting the provider to be displayed in the UI).

Please read Supabase's documentation on how to set up third-party providers.

For local development, also check out Supabase's documentation on how to set up OAuth providers locally.

Local development secrets

For local development, you would need to set the environment variables for oAuth providers in packages/db/.env.local - this is the place from where the local Supabase instance reads the environment variables.

packages/db/.env.local

# Google OAuth credentials used by Supabase
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
 
# Github OAuth credentials used by Supabase
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

After changing values in .env.local, you need to restart Docker containers using pnpm db:stop and pnpm db:start to apply the changes.

Remember to add redirect URL

As for the web app, we need to define some redirect url where the user is redirected after authentication. For mobile app, we don't have a classic URL, but an app scheme, which we're using to deep link user to specified screen in the app.

To find your app scheme, take a look at apps/mobile/app.config.ts file:

apps/mobile/app.config.ts

export default ({ config }: ConfigContext): ExpoConfig => ({
    ...
    scheme: "turbostarter",
    ...
});

Then, for local development, ensure it's added to additional_redirect_urls array in packages/db/supabase/config.toml file:

packages/db/supabase/config.toml

...
 
[auth]
site_url = "http://localhost:3000"
...
additional_redirect_urls = ["http://localhost:54321/auth/v1/callback", "turbostarter://**"]
 
...

For the cloud instance, make sure to add in your project dashboard under Authentication -> URL Configuration -> Redirect URLs.

Supabase Redirect URLs

Third party providers

On this page