Skip to Content
DocumentationGuidesAuthentication

Authentication

Available Authentication Methods

  • 🪄 Magic Link (Email OTP): Passwordless email authentication
  • Apple Sign-In: Native iOS authentication (iOS only)
  • 🔍 Google Sign-In: OAuth via Google account
  • 📘 Facebook Sign-In: OAuth via Facebook account
  • 🐦 Twitter Sign-In: OAuth via Twitter/X account
  • 👤 Guest Mode: Access without authentication

Usage

<WithMagic
  email={email}
  onSuccess={(data) => {
    router.push({ pathname: '/(auth)/otp', params: { email } });
  }}
  onError={(error) => {
    showErrorToast({ title: 'Failed', subtitle: error.message });
  }}
/>

OAuth Providers

<WithGoogle onSuccess={() => router.replace("/")} />
<WithApple onSuccess={() => router.replace("/")} />
<WithFacebook onSuccess={() => router.replace("/")} />
<WithTwitter onSuccess={() => router.replace("/")} />

Guest Mode

const { setGuest } = useCache();
setGuest(true);
router.replace({
  pathname: '/(drawer)/(tabs)/(home)',
  params: { guest: 'true' },
});

Adding New Authentication Method

Step 1: Create Component

Create components/auth/with[Provider].tsx:

components/auth/with[Provider].tsx
import { Button } from "../ui/button";
import { Text } from "../ui/text";
import { AuthComponentProps } from "./types";
import { supabase } from "@/lib/supabase";
 
export default function With[Provider]({
  onSuccess,
  onError,
  className,
  ...buttonProps
}: AuthComponentProps) {
  const handleAuth = async () => {
    try {
      // 1. Authenticate with provider SDK
      // 2. Get token from provider
      // 3. Sign in with Supabase
 
			// Supabase auth method
      const { error, data } = await supabase.auth.signInWithIdToken({
        provider: "provider-name",
        token: providerToken,
      });
 
			// 4. Or Alternative auth provider
			// write OAuth flow here if needed
 
      if (error) throw error;
      onSuccess?.(data);
    } catch (error) {
      onError?.(error);
    }
  };
 
  return (
    <Button
      size="lg"
      variant="secondary"
      className={`flex-row items-center justify-center w-full gap-1 ${className}`}
      onPress={handleAuth}
      {...buttonProps}
    >
      <Text className="mr-auto font-semibold">Continue with [Provider]</Text>
    </Button>
  );
}

Step 2: Add to Sign-In Screen

import With[Provider] from "@/components/auth/with[Provider]";
 
// In JSX:
<With[Provider] onSuccess={onSuccessProvider} />

Step 3: Configure in Supabase

  1. Go to Supabase Dashboard → Authentication → Providers
  2. Enable your provider
  3. Add Client ID and Secret

For more details, refer to the Supabase Auth Providers Documentation .

Step 4: Add Environment Variables

EXPO_PUBLIC_[PROVIDER]_CLIENT_ID=your_client_id
...

Component Props

type AuthComponentProps = {
  onSuccess?: (data?: AuthTokenResponse['data']) => void;
  onError?: (error: any) => void;
  className?: string;
  // ... extends ButtonProps
};
AnalyticsData Fetching