FeaturesAuthentication

Integration

How to implement the authentication feature in an existing application.

This guide explains how to implement the authentication feature in a new/existing native application using the @kit/auth package.

Installation

First, install the authentication package:


pnpm add '@kit/auth@workspace:*'

Configuration File

Create the authentication configuration in config/auth.config.ts.

This object will contain all customization options, allowing you to change the behavior of the authentication system.

You gonna pass this object to almost all the code coming from the @kit/auth package.

auth.config.ts


import { parseAuthConfig } from '@kit/auth/config';
import { Href } from 'expo-router';
 
const urls = {
    dashboard: '/', // use Href for native env
    callback: '/auth/callback',
    signIn: '/auth/sign-in',
    signUp: '/auth/sign-up',
    forgottenPassword: "/auth/password-reset",
    verifyMfa: "/auth/verify",
} satisfies Record<string,Href>;
 
export const authConfig = parseAuthConfig({
    environment: 'native',
    urls,
    // whether to display the terms checkbox during sign-up
    displayTermsCheckbox: true,
 
    // NB: Enable the providers below in the Supabase Console
    // in your production project
    providers: {
        password: true,
        oAuth: ['google'],
    },
    passwordRequirements: {
        minLength: 3,
        maxLength: 99,
        specialChars: false,
        numbers: false,
        uppercase: false,
    },
});

AuthConfig

Prop	Type	Default
`environment*`	`"www" \| "native"`
`providers*`	`{ password: boolean; oAuth:...`
`urls*`	`{ dashboard: string;...`
`displayTermsCheckbox`	`boolean`
`passwordRequirements`	`{ minLength: number;...`

Auth Provider

The AuthProvider component is used for routing purpose.

The AuthProvider component make sure that the user is authenticated.

For instance, if the user logout in another tab, the AuthProvider will redirect the user to the sign in page for all tabs opened in the browser.

app/_layout.tsx

import React from 'react';
import { AuthProvider, AuthProviderSignedIn, AuthProviderSignedOut } from '@kit/auth/native/ui/auth-provider';
 
export default function Layout({ children }: React.PropsWithChildren) {
    
    return (
        <AuthProvider>
            <AuthProviderSignedIn>
                <YourApp />
            </AuthProviderSignedIn>
 
            <AuthProviderSignedOut>
                <Redirect href={'/auth/welcome'} />
            </AuthProviderSignedOut>
        </AuthProvider>
    );
}

auth folder

All the native authentication logic is implemented in apps/mobile/app/auth, check this folder if you want to know more to implement the authentication feature in another application.

Authentication

The only authentication documentation page you need if you just want to setup the mobile application.

Onboarding

Add an onboarding process after registration on your mobile app to collect more data on your new users.

How is this guide?

Last updated on 1/18/2026