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:
Registering a Return URL, which looks like:
https://project-id.firebaseapp.com/__/auth/handler
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.
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 IDapple.com
:Web version 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('apple.com');
Web version 8
var provider = new firebase.auth.OAuthProvider('apple.com');
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
andname
scopes.Web version 9
provider.addScope('email'); provider.addScope('name');
Web version 8
provider.addScope('email'); provider.addScope('name');
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
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
Web version 8
provider.setCustomParameters({ // Localize the Apple authentication screen in French. locale: 'fr' });
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); // ... });
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; // ... });
To redirect the page, first call
signInWithRedirect()
:Follow the best practices when using
signInWithRedirect
,linkWithRedirect
, orreauthenticateWithRedirect
.Web version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
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); // ... });
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; // ... });
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.