Pick your app

The examples below will be updated with your app ID.

Authentication and Permissions

Sign In with Apple

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

#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>