Authentication and Permissions

Sign In with Apple

Instant supports Sign In with Apple on the Web and in native applications.

Web Popup (recommended)

Use Apple-provided popup to authenticate users

Web Redirect

Use redirect flow to authenticate users

React Native

Authenticating in React Native app

Step 1: Create App ID

  • Navigate to Certificates, Identifiers & Profiles
  • Select Identifiers
  • Click +
  • Register a new identifier → Select App IDs
  • Select a type → Select App
  • CapabilitiesSign In with Apple → Check
  • Fill in Bundle ID and Description
  • Click Register

Step 2: Create Services ID

  • Navigate to Services IDs
  • Click +
  • Register a new identifier → Select Services IDs
  • Fill in Description and Identifier. You’ll need this Identifier later
  • Click Register

Step 3: Configure Services ID (Web Popup flow)

  • Select newly created Services ID
  • Enable Sign In with Apple
  • Click Configure
  • Select Primary App ID from Step 1
  • To Domains, add your app domain (e.g. myapp.com)
  • To Return URLs, add URL of your app where authentication happens (e.g. https://myapp.com/signin)
  • Click ContinueSave

Step 4: Register your OAuth client with Instant

  • Go to the Instant dashboard and select Auth tab.
  • Select Add Apple Client
  • Select unique clientName (apple by default, will be used in db.auth calls)
  • Fill in Services ID from Step 2
  • Click Add Apple Client

Step 5: Add Sign In code to your app (Web Popup flow)

Add Apple Sign In library to your app:

https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js

Initialize with Services ID from Step 2:

AppleID.auth.init({
  clientId: '<Services ID>',
  scope: 'name email',
  redirectURI: window.location.href,
});

Implement signInPopup using clientName from Step 4:

async function signInPopup() {
  let nonce = crypto.randomUUID();

  // authenticate with Apple
  let resp = await AppleID.auth.signIn({
    nonce: nonce,
    usePopup: true,
  });

  // authenticate with Instant
  await db.auth.signInWithIdToken({
    clientName: '<clientName>',
    idToken: resp.authorization.id_token,
    nonce: nonce,
  });
}

Add Sign In button:

<button onClick={signInPopup}>Sign In with Apple</button>