This guide explains how to implement Firebase Authentication in your React Native application using our authentication wrapper.

​
Features

​
Setup

First, wrap your application with the AuthProvider:

import { AuthProvider } from '@/path/to/auth';

function App() {
  return (
    <AuthProvider>
      <YourApp />
    </AuthProvider>
  );
}

​
Usage

Use the useAuth hook to access authentication functions and state:

import { useAuth } from '@/path/to/auth';

function YourComponent() {
  const { 
    user, 
    signIn, 
    signUp, 
    signOut,
    isLoading 
  } = useAuth();
}

​
Authentication Methods

​
Email/Password Authentication

// Sign Up
const { signUp } = useAuth();
await signUp('user@example.com', 'password');

// Sign In
const { signIn } = useAuth();
await signIn('user@example.com', 'password');

​
Social Authentication

​
Apple Sign-In

To enable Apple Sign-In:

  1. Actually, you can follow the Apple Sign-In guide.
  2. Apple configuration parts are same as in Supabase but when you add your callback url to Apple Developer Console, this time you need to add Firebase callback url.
  3. You can check: React Native Firebase Social Auth
const { signInWithApple } = useAuth();
await signInWithApple();

​
Google Sign-In

To enable Google Sign-In:

  1. Uncomment the Google Sign-In configuration in the auth provider
  2. Configure your Google credentials (eas credentials sha-1 key)
  3. Use the signInWithGoogle method:
const { signInWithGoogle } = useAuth();
await signInWithGoogle();

​
How to get eas credentials sha-1 key?

1

  1. Open your Expo project codebase and run: eas credentials
  2. Select Platform: Android
  3. Using build profile: development
  4. Pick the Keystore: Manage everything needed to build your project
  5. Set up a new Keystore
  6. Get your SHA-1 key
2

When you get your SHA-1 key, you need to add it to Firebase Console.

  1. Go to Firebase Console
  2. Open project settings,
  3. Go to Your apps section.
  4. Add SHA-1 key to your app and download google-services.json file.
  5. Save it to the Expo project codebase.
  6. You need to rebuild your app with eas or npx prebuild

(prebuild is not going to work because we created this key with eas).

3

You need to do that for Production build too. You need to integrate with your Play Console.

And I must say again. If you do that steps, you need to create eas development build for testing Google Sign-In.

It is not going to work with npx prebuild.

​
Anonymous Authentication

const { signUpAnonymously } = useAuth();
await signUpAnonymously();

​
Password Reset

const { sendNewPasswordLink } = useAuth();
await sendNewPasswordLink('user@example.com');

​
Auth State

The useAuth hook provides several state variables:

const {
  user,          // Current user object
  idToken,       // Firebase ID token
  initialized,   // Auth initialization status
  isLoading,     // Loading state for auth operations
  error,         // Current error message
  showPassword   // Password visibility state
} = useAuth();

​
Error Handling

The authentication wrapper includes built-in error handling:

  • Token expiration management
  • Firebase auth error parsing
  • Toast notifications for errors
  • Automatic token refresh
const { handleError } = useAuth();

try {
  // Your auth code
} catch (error) {
  handleError(error);
}

​
Sign Out

const { signOut } = useAuth();
await signOut();

​
TypeScript Support

The authentication context is fully typed with TypeScript. The main types include:

type AuthContextType = {
  user: FirebaseAuthTypes.User | null;
  idToken: string | null;
  initialized: boolean;
  signOut: () => Promise<void>;
  signIn: (email: string, password: string) => Promise<void>;
  signUp: (email: string, password: string) => Promise<void>;
  signInWithGoogle: () => Promise<void>;
  signInWithApple: () => Promise<void>;
  handleShowPassword: () => void;
  isLoading: boolean;
  error: string | null;
  showPassword: boolean;
  handleError: (error: Error) => void;
  sendNewPasswordLink: (email: string) => Promise<void>;
  signUpAnonymously: () => Promise<void>;
};

​
Security Considerations

  • Automatic token management
  • Secure storage of credentials
  • Email verification for new accounts
  • Proper error handling and user feedback
  • Token refresh mechanism

This documentation provides a comprehensive guide for developers implementing Firebase authentication in their applications. It covers all the main features, usage patterns, and important considerations for secure implementation.

Was this page helpful?

6. Submit your appOverview