Signing in users with Apple

This document shows you how to use Identity Platform to add Sign in with Apple to your web app.

Before you begin

Create a basic web app that uses Identity Platform with HTML and JavaScript. See the Quickstart to learn how.
Join the Apple Developer Program.

Configuring your app with Apple

On the Apple Developer site:

Follow the steps in Configure Sign in with Apple for the web. This includes:
1. Registering a Return URL, which looks like:
```
https://project-id.firebaseapp.com/__/auth/handler
```
2. Temporarily hosting a file at the following URL to verify your domain:
```
https://project-id.firebaseapp.com/.well-known/apple-developer-domain-association.txt
```
Additionally, take note of your Services ID and Apple team ID — you'll need them in the next section.
Use an Apple private key to create a sign in. You'll need the key and its ID in the next section.
If you use Identity Platform to send emails to your users, configure your project with Apple's private email relay service using the following email:
```
noreply@project-id.firebaseapp.com
```
You can also use a custom email template, if your app has one.

Complying with Apple's anonymized data requirements

Apple gives users the option of anonymizing their data, including their email address. Apple assigns users who select this option an obfuscated email address with the domain privaterelay.appleid.com.

Your app must comply with any applicable developer policies or terms from Apple regarding anonymized Apple IDs. This includes obtaining user consent before associating any personally identifying information (PII) with an anonymized Apple ID. Actions that involve PII include, but are not limited to:

Linking an email address to an anonymized Apple ID, or vice versa.
Linking a phone number to an anonymized Apple ID, or vice versa
Linking a non-anonymous social credential, such as Facebook or Google, to to anonymized Apple ID, or vice versa.

For more information, refer to the Apple Developer Program License Agreement for your Apple developer account.

Configuring Apple as a provider

To configure Apple as an identity provider:

Go to the Identity Providers page in the Google Cloud console.

Go to the Identity Providers page
Click Add A Provider.
Select Apple from the list.
Under Platform, select Web.
Enter your Services ID, Apple team ID, Key ID, and private key.
Register your app's domains by clicking Add Domain under Authorized Domains. For development purposes, localhost is already enabled by default.
Under Configure your application, click Setup Details. Copy the snippet into your app's code to initialize the Identity Platform client SDK.
Click Save.

Signing in users with the client SDK

To sign in a user:

Create an instance of the OAuthProvider provider object, using the ID apple.com:
Web version 9

Learn more about the tree-shakeable modular Web API and upgrade from the namespaced API.
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('apple.com');auth_apple_provider_create.js
```
Web version 8
```
var provider = new firebase.auth.OAuthProvider('apple.com');apple.js
```
Optional: Add OAuth scopes. Scopes specify what data you are requesting from Apple. More sensitive data may require specific scopes. By default, when One account per email address is enabled, Identity Platform requests the email and name scopes.
Web version 9

Learn more about the tree-shakeable modular Web API and upgrade from the namespaced API.
```
provider.addScope('email');
provider.addScope('name');auth_apple_provider_scopes.js
```
Web version 8
```
provider.addScope('email');
provider.addScope('name');apple.js
```
Optional: Localize the authentication flow. You can specify a language, or use the device's default language. See the Sign In with Apple docs for the supported locales.
Web version 9

Learn more about the tree-shakeable modular Web API and upgrade from the namespaced API.
```
provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});auth_apple_provider_params.js
```
Web version 8
```
provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});apple.js
```

Use the provider object to sign in the user. You can either open a pop-up window, or redirect the current page. Redirecting is easier for users on mobile devices.

To show a pop-up, call signInWithPopup():

Web version 9

import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // The signed-in user info.
    const user = result.user;

    // Apple credential
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;

    // IdP data available using getAdditionalUserInfo(result)
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });auth_apple_signin_popup.js

Web version 8

firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;

    // You can also get the Apple OAuth Access and ID Tokens.
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;

    // IdP data available using getAdditionalUserInfo(result)
  // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });apple.js

To redirect the page, first call signInWithRedirect():

Follow the best practices when using signInWithRedirect, linkWithRedirect, or reauthenticateWithRedirect.

Web version 9

import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_apple_signin_redirect.js

Web version 8

firebase.auth().signInWithRedirect(provider);apple.js

Then, call getRedirectResult() to retrieve the Apple token when your page loads:

Web version 9

import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

// Result from Redirect auth flow.
const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = OAuthProvider.credentialFromResult(result);
    if (credential) {
      // You can also get the Apple OAuth Access and ID Tokens.
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    }
    // The signed-in user info.
    const user = result.user;
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });auth_apple_signin_redirect_result.js

Web version 8

// Result from Redirect auth flow.
firebase
  .auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // You can get the Apple OAuth Access and ID Tokens.
      var accessToken = credential.accessToken;
      var idToken = credential.idToken;

      // IdP data available in result.additionalUserInfo.profile.
      // ...
    }
    // The signed-in user info.
    var user = result.user;
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });apple.js

This is also where you can catch and handle errors. For a list of error codes, see the API reference.

Unlike many other identity providers, Apple does not provide a photo URL.

If a user chooses not to share their real email with your app, Apple provisions a unique email address for that user to share instead. This email takes the form xyz@privaterelay.appleid.com. If you configured the private email relay service, Apple forwards emails sent to the anonymized address to the user's real email address.

Apple only shares user information, such as display names, with apps the first time a user signs in. In most cases, Identity Platform stores this data, which lets you fetch it using firebase.auth().currentUser.displayName during future sessions. However, if you allowed users to sign into your app using Apple before integrating with Identity Platform, user information is not available.

What's next

Learn how to link Apple accounts to other providers. Note that Apple requires you to get explicit consent from users before you link their Apple accounts to other data.
Learn more about Identity Platform users.
Sign in users with other identity providers.