How to Add Login with Apple to Your Elementor Site?

Adding Apple Login to your Elementor site through Happy Social Login lets visitors log in seamlessly using their Apple credentials. However, to use this feature, you’ll need an active Apple Developer Program subscription, which costs $99 per year.

In this guide, I’ll walk you through each step to retrieve the required Apple information: Service ID (Identifier), Team ID, Key ID, and Key Content from your Apple Developer account, and then integrate it into Happy Social Login.

Step 1: Sign in to Your Apple Developer Account

1. Go to the Apple Developer Portal and sign in with your Apple Developer credentials.
2. Navigate to Certificates, Identifiers & Profiles.

Step 2: Create an App ID for Your Website

1. In the sidebar, select Identifiers.
2. Click the + icon to create a new identifier and select App IDs.
3. Select App as the type and click Continue.
4. In the Description field, enter a name for your app (e.g., your website name).
5. For Bundle ID, choose Explicit and enter your domain in reverse order, such as com.yourdomain.yourapp.
6. In the Capabilities section, check the box next to Sign In with Apple.
7. Click Continue and then Register.

This step configures the app that will be associated with your Sign In with Apple functionality.

Step 3: Create a Service ID (Your OAuth Client ID)

1. Under Identifiers, select Service IDs.
2. Click the + icon and choose Service IDs.
3. Enter a Description and an Identifier for the Service ID (use a reverse-domain format, like com.yourdomain.yourapp).
4. Click Continue and then Register.
5. Once created, click on the Service ID to edit it.
6. Check Sign In with Apple and click Configure.
7. For Primary App ID, select the App ID you created earlier.
8. In Domains and Subdomains, enter your website’s domain (e.g., yourdomain.com).
9. For Return URLs, enter https://yoursite.com/sso/apple (replace yoursite.com with your actual domain).
10. Click Next, then Done, and finally Save.

Your Service ID (Identifier) is now set up and will serve as the OAuth Client ID for Happy Social Login.

Step 4: Generate an Apple Key (Key ID and Key Content)

1. In the sidebar, select Keys.
2. Click the + icon to create a new key.
3. Enter a Key Name (e.g., “Apple Login Key”).
4. Enable Sign In with Apple and click Configure.
5. For Primary App ID, select the App ID you created.
6. Click Save, then Continue, and finally Register.
7. Download the key file (.p8) immediately. This is your Key Content, and you won’t be able to download it again.
8. Make sure to save this file securely. Open it in a text editor to view the contents, which will be used later in Happy Social Login.

You now have the Key ID (found on the key’s information page) and Key Content (from the downloaded .p8 file).

Step 5: Locate Your Team ID

1. In the Apple Developer account dashboard, your Team ID is displayed under your account name at the top right.
2. Note this 10-character identifier, as it will be needed for Happy Social Login.

Step 6: Configure Happy Social Login with Apple Credentials

Now that you have all the required information, it’s time to enter it in Happy Social Login:

1. In your WordPress Dashboard, go to Happy Social Login > Settings > Providers > Apple.
2. Enable Apple as a provider.
3. Enter the following information:
   • Service ID (Identifier): Enter the Service ID you created. e.g com.yourdomain.yourapp
   • Team ID: Enter your Apple Team ID.
   • Key ID: Enter the Key ID generated for your Apple key.
   • Key Content: Open the downloaded .p8 file in a text editor, copy all its content, and paste it here.
4. Click Verify to confirm the setup.

If verification is successful, Apple Login is now configured in Happy Social Login!

Step 7: Test Apple Login

To ensure everything works smoothly:

1. Log out of your WordPress account or open a private/incognito browser window.
2. Go to your login page (e.g., yoursite.com/login).
3. You should see a Continue with Apple button.
4. Click it and go through the Apple login process.
5. Once authenticated, you’ll be redirected back to your site, and a new user should be created in the WordPress Users table.

Conclusion

Setting up Apple Login on your Elementor site with Happy Social Login offers a seamless, privacy-focused login option for users with Apple accounts. By following these steps, you can retrieve and configure all the necessary credentials from Apple Developer, ensuring a smooth, one-click login experience for your audience.

This setup boosts your website’s user experience and enhances security with Apple’s trusted authentication.