Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
100 lines (62 sloc) 4.11 KB
title lastmod publishdate author draft description tags type youtube
Apple SignIn with Firebase
2020-02-09 08:41:24 -0700
2020-02-09 08:41:24 -0700
Jeff Delaney
false
Authenticate users into your Firebase app with Apple SignIn on the web.
auth
ios
javascript
lessons
UafqYgRoIC0

Sign in with Apple was announced in 2019 and allows users to authenticate into your Firebase app with an Apple ID. Users must have two-factor authentication (2FA) enabled on their Apple account AND be signed into iCloud.

The following lesson demonstrates how to configure Apple SignIn with the Firebase JavaScript SDK.

Sign in with Apple Setup

Follow the steps outlined below to implement Sign In with Apple in your app.

Step 0 - Apple Developer Program

You must be a member of the Apple Developer Program. It costs $99 per year.

Step 1 - Create or Update an App ID

From the Apple Developer Portal go to Certificates, Identifiers & Profiles >> Identifiers. Create a new App ID or update an existing app and give it the Sign In with Apple capability.

{{< figure src="/img/snippets/apple-signin-app1.png" alt="Apple Developer Portal App IDs" >}} {{< figure src="/img/snippets/apple-signin-app2.png" caption="Make sure Sign In with Apple is Enabled" >}}

Step 2 - Create and Configure a Service ID

From Certificates, Identifiers & Profiles >> Identifiers, create a new Service ID and make sure is linked to your primary App ID. Configure it point to your Firebase hosting URL.

{{< figure src="/img/snippets/apple-signin-web-config.png" caption="Replace the project ID for your domain" >}}

Step 3 - Verify Domain Ownership

Go to Service ID you created in the previous step and click configure, then click download. Save the file in your web app's public hosting directory under ./well-known/.

Deploy this file to your domain so Apple can verify it.

{{< file "terminal" "command line" >}} {{< highlight text >}} firebase deploy --only hosting {{< /highlight >}}

{{< figure src="/img/snippets/apple-signin-verify.png" caption="You should see a green checkmark next to the domain" >}}

Step 4 - Register a Private Key

From Certificates, Identifiers & Profiles >> Identifiers, create and download a new private key - keep it private. It is used to validate requests from Apple with your Firebase project.

{{< figure src="/img/snippets/apple-signin-private-key.png" caption="Download the private key. Do not expose it publicly." >}}

Step 5 - Enable SignIn Method on Firebase

Head over the to the Firebase Console and go to the Authentication >> Sign-in Method tab. Enable Apple and enter the required details.

{{< figure src="/img/snippets/apple-signin-firebase-console.png" caption="Copy the contents of the private key in the console" >}}

Frontend Code

We now have all the pieces in place to implement SignIn with Apple into our web app. Because this is Firebase, it only requires a few lines of code. Assuming you have Firebase installed in your project, simply make a reference the the provider and call signInWithPopup().

{{< figure src="/img/snippets/apple-signin-popup.png" caption="SignIn with Apple popup seen by the end-user" >}}

Basic JavaScript Implementation

The frontend implementation is an async function that can bound to a button click to trigger the popup modal. Make sure to follow Apple UI guidelines when designing the button.

{{< file "js" "app.js" >}} {{< highlight javascript >}} const auth = firebase.auth();

async signInWithApple() { const provider = new firebase.auth.OAuthProvider('apple.com'); const result = await auth.signInWithPopup(provider);

console.log(result.user); // logged-in Apple user

} {{< /highlight >}}

You can’t perform that action at this time.