Authenticate using Apple on Web using Firebase Auth
Sign in with Apple was announced in 2019 and allows users to authenticate into your Firebase app with an Apple ID.
Before you start make sure you have a firebase project and enroll yourself in the apple developer program. Now create a web app in your firebase project in the Firebase console.
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.
Step 2: Create a Service ID
From the Apple Developer Portal go to Certificates, Identifiers & Profiles » Identifiers. Create a new Service ID by clicking the (+) button in the top left corner. And make sure that “Sign in with Apple” is checked.
Now click on the “Configure” button, in the modal popup, select the App ID that you created on the last step and give the domain name and the Return URLs from the firebase.
Step 3: Register a Private Key
From the Apple Developer Portal go to Certificates, Identifiers & Profiles » Keys, create a new private key (keep it private). It is used to validate requests from Apple with your Firebase project.
Select the “Sign in with Apple”, click on configure and select your App ID. Now Download the Key and copy your Key ID for the next step.
Step 4: Enable & Setup SignIn Method on Firebase Console
Head over to the Firebase Console and go to the Authentication » Sign-in Method tab. Enable Apple and enter the required details.
Step 5: Frontend Implementation
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 to the provider and call signInWithPopup().
import * as firebase from "firebase/app";
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
}
Hooray!!, Now you can authenticate your application using Apple.
Say Hi, It’s free at @matheswaaran_S or https://matheswaaran.com
