Apple Social Login with Magic
Apple Social Login with Magic
#Overview
You can allow your users to sign up & log in to your web app with their Apple ID.
#Usage
#Prerequisites
- You will need an Apple developer account
- You will need to have created a primary App ID for your Apple developer account
- You will need to have the Magic SDK installed into your web app
- You will need to have the Magic SDK - OAuth Extension installed into your web app
#Apple Setup (v1 extension)
- Go to your Magic Dashboard
- Select the Magic app for which you’d like to enable Sign in with Apple, or create a new app
- Navigate to Social Login from the sidebar
- Click the toggle for Apple. Looks like we'll need to collect a few important details from Apple first: a Services ID, Key ID, Team ID, and Private Key
- Open a new tab, go to your Apple developer dashboard
- Navigate to Membership details
- Find your Team ID. Copy/paste this to the setup form on Magic Dashboard
- In Apple's dashboard, navigate to Identifiers under Certificates, IDs, & Profiles
- Add a new Services ID for your Magic authentication connection. The identifier you select here should be added to the setup form on Magic Dashboard as your Services ID. Click Continue, then click Register.
- You'll be returned to a list of Services IDs you've registered, including your new one for Magic authentication. Click your newly created Services ID to enable it for Sign in with Apple. Then, click Configure.
- A modal will show, allowing you to connect your Services ID to specific internet domains. In Domains & Subdomains, enter
auth.magic.link
. In Return URLs, you'll paste the Redirect URI listed on Magic Dashboard for your Apple Social Login connection. Once you've entered the correct information, you can save your Services ID by clicking Continue, then Save. - Return to Magic Dashboard, you should have Team ID and Services ID populated by this step. Now you can paste your Key ID as well. Finally, you'll need to paste the contents of the Private Key file you downloaded from Apple's dashboard Click “Save” – Done!
#Apple Setup (v2 extension)
- In step 11, whitelist your app's domain in Domains & Subdomains, and paste the Redirect URI you will pass in as the redirectURI argument to the loginWithRedirect method
Javascript
01await magic.oauth2.loginWithRedirect({
02 provider: 'apple',
03 redirectURI: 'https://your-app.com/your/oauth/callback', // <== whitelist this with Apple
04});