Skip to main content

Quick Start

This walks from a fresh install to a signed-in Google user, then hands the credential to Firebase. The same signIn(AuthProvider.GOOGLE) call works on web, iOS, and Android — native dispatch picks the right Google SDK for you.

Google-first (2.4.x)

Google is the only enabled provider right now. Any other provider id throws AuthErrorCode.PROVIDER_NOT_ENABLED until it is re-enabled. See the provider overview.

1. Configure Google​

Configuration is a one-time call. Use the exported AuthProvider enum (recommended — typo-safe; the plain string 'google' also works).

import { auth, AuthProvider } from 'capacitor-auth-manager';

auth.configure({
  providers: {
    [AuthProvider.GOOGLE]: {
      clientId: 'YOUR_WEB_OAUTH_CLIENT_ID',        // web + Android serverClientId fallback
      serverClientId: 'YOUR_WEB_OAUTH_CLIENT_ID',  // REQUIRED on Android to receive an idToken
      iosClientId: 'YOUR_IOS_OAUTH_CLIENT_ID',     // iOS (or set GIDClientID in Info.plist)
    },
  },
  persistence: 'local',
});

serverClientId is the Web OAuth client id; Android's Credential Manager needs it to return an id token. See the Google provider page for the full native setup (SHA-1/256 on Android, the reversed-client-id URL scheme on iOS).

2. Sign in​

The same call runs on every platform and resolves to an AuthResult. The idToken field is populated on web, iOS, and Android.

const result = await auth.signIn(AuthProvider.GOOGLE);
const idToken = result.credential.idToken;     // present on web, iOS, and Android
console.log('Welcome', result.user.displayName);

3. Hand the credential to Firebase (identical on every platform)​

The package is Firebase-agnostic — it does not bundle Firebase. You take the Google id token and call signInWithCredential yourself. This is the same code on web and native.

import { getAuth, GoogleAuthProvider, signInWithCredential } from 'firebase/auth';

const result = await auth.signIn(AuthProvider.GOOGLE);
await signInWithCredential(
  getAuth(),
  GoogleAuthProvider.credential(result.credential.idToken),
);

4. React to auth state​

onAuthStateChange calls your listener immediately with the current state, then on every change. It returns an unsubscribe function. The state shape is { user, isLoading, isAuthenticated, provider } — it carries no raw tokens.

const unsubscribe = auth.onAuthStateChange((state) => {
  if (state.isAuthenticated) {
    console.log('Signed in as', state.user?.email, 'via', state.provider);
  } else {
    console.log('Signed out');
  }
});

// later
unsubscribe();

5. Sign out​

await auth.signOut();

The same flow in React​

No context provider is needed — import the hook and use it. The hook subscribes to the singleton for you.

import { useAuth, AuthProvider } from 'capacitor-auth-manager/react';

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

  if (isLoading) return <span>Loading…</span>;
  if (user) {
    return (
      <>
        <span>Welcome, {user.displayName}</span>
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }
  return <button onClick={() => signIn(AuthProvider.GOOGLE)}>Sign in with Google</button>;
}

Call auth.configure() as early as possible in app startup (for example in your entry module) so the first render already has provider config.

Where to go next​