Tutorial10 min read

Social login and OAuth2 in Capacitor apps

Add Sign in with Apple, Google, and OAuth2 to a Capacitor app the native way, with Supabase as the backend. Setup, redirect handling, token storage, and iterating the flow with OTA updates.

“Sign in with Google” and “Sign in with Apple” are the difference between a signup and an abandonment for a lot of users. Doing OAuth2 well in a Capacitor app means using the native flow — not a web popup stuffed in a WebView — and handling the redirect cleanly. This guide covers the setup with Supabase as the backend, and how OtaKit lets you refine the flow after launch.

Apple requires that if you offer any third-party social login, you also offer Sign in with Apple. Build both from the start or you'll hit a review rejection.

1. Use native OAuth, not an in-WebView popup

Providers increasingly block OAuth inside embedded WebViews. Use a Capacitor social-login plugin that invokes the native flow (ASWebAuthenticationSession on iOS, Custom Tabs on Android) so the provider sees a real, trusted browser context.

2. Wire it to Supabase

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// after the native plugin returns an id token / provider token:
const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'apple',
  token: idToken,
});

3. Handle the redirect

OAuth returns to your app via a deep link. Register the redirect URL with the provider and handle it with appUrlOpen — the same mechanism as deep links:

import { App } from '@capacitor/app';

App.addListener('appUrlOpen', ({ url }) => {
  if (url.includes('auth/callback')) completeSignIn(url);
});

4. Store the session securely

Persist the returned session in the platform keystore, not web storage — see secure token storage. Combine with biometric auth to gate re-entry.

The sign-in flow — button order, error messages, which providers you show, the post-login routing — is web-layer code. When a provider changes requirements or you add a new one, ship it over the air with otakit upload --release production rather than a full store cycle.

Where to go next

See Security for the update-integrity side, and secure token storage to finish the auth story.

Related docs