This guide will help you set up the plugin in your Bubble editor to make it work properly.

​🚀 Setup Guide

The plugin guide consists of three parts:
  • Apple Developer Account - to configure your own developer account,
  • Plugins Tab - to configure the Keys,
  • and Plugin API Configuration - to configure the plugin in the Backend workflows and regular workflows.
Also, you can preview the Plugin Features to know about its available features and some hints.​

Apple Developer Account

1. You must have a developer account at Apple to interact with the plugin. Create your development account here: https://developer.apple.com/sign-in-with-apple/get-started​​

Create an APP ID

From the sidebar, choose Identifiers then click the blue plus icon.
Image without caption
Choose App IDs in this first step.​
Image without caption
In the next screen, you’ll choose a description and Bundle ID for the App ID. The description isn’t too important, but type something descriptive. The Bundle ID is best when it’s a reverse-dns style string.
Image without caption
In this example, I’m using lol.avocado since the domain this app will be running on is avocado.lol.
Copy just the ID from the Team ID, and store it somewhere as you'll need it to paste in Plugin Settings later on.
Image without caption
You’ll also want to scroll down through the list of capabilities and check the box next to Sign In with Apple.
Image without caption
Go ahead and confirm this step.​

Create a Service ID

The App ID in the previous step is a sort of way to collect things about this app. It seems redundant when you’re only making a simple web app login experience like this example, but it makes more sense once you have a native app and web app that you want to tie together under a single login experience.
The Services ID will identify the particular instance of your app, and is used as the OAuth client_id.
Go ahead and create a new identifier and choose Services IDs.
Image without caption
In the next step, you’ll define the name of the app that the user will see during the login flow, as well as define the identifier which becomes the OAuth client_id. Make sure to also check the Sign In with Apple checkbox.
Image without caption
Copy this value under the IDENTIFIER column, which is your Service ID. Store it somewhere as you'll need it to paste in Plugins settings later on.
Image without caption

Plugin Settings

You’ll also need to click the Configure button next to Sign In with Apple in this step. This is where you’ll define the domain your app is running on, as well as define the redirect URLs used during the OAuth flow.
Image without caption
Note: In the Return URLs filed add three URLs separated by comma from the backend with initialize and without initialize (how to get URL with initialize see point 1,2). Example: https://example-app.com/version-test/api/1.1/wf/applesignin/initialize, https://example-app.com/version-test/api/1.1/wf/applesignin, https://exampleapp.com/api/1.1/wf/applesignin
Make sure your associated App ID is chosen as the Primary App ID. (If this is the first App ID you’ve made that uses Sign In with Apple, then it will probably already be selected.)
Enter the domain name your app will eventually be running at, and enter the redirect URL for your app as well. If you want to follow along with this blog post, then you can use the placeholder redirect URL https://example-app.com/redirect which will catch the redirect so you can see the authorization code returned.
It’s worth noting that Apple doesn’t allow localhost URLs in this step, and if you enter an IP address like 127.0.0.1 it will fail later in the flow. You have to use a real domain here.
Go ahead and click Save and then Continue and Register until this step is all confirmed.
Ok! At this point, you now have an App ID container to hold everything, and you’ve created a Services ID which you’ll use as your OAuth client_id. The Identifier you entered for your Services ID is your OAuth client_id. In my example, that is lol.avocado.client.

Create a Private Key For Client Authentication

Rather than using simple strings as OAuth client secrets, Apple has decided to use a public/private key pair, where the client secret is actually a signed JWT. This next step involves registering a new private key with Apple.
Back in the main Certificates, Identifiers & Profiles screen, choose Keys from the side navigation.
Image without caption
Click the blue plus icon to register a new key. Give your key a name, and check the Sign In with Apple checkbox.
Image without caption
Click the Configure button and select your primary App ID you created earlier.
Image without caption
Apple will generate a new private key for you and let you download it only once. Make sure you save this file, because you won’t be able to get it back again later! The file you download will end in .p8, but it’s just text inside, so rename it to key.txt so that it’s easier to use in the next steps.
Image without caption
Lastly, go back and view the key information to find your Key ID which you’ll need in the next step.
Image without caption
Alright, that was a lot, but we are now ready to start writing some code! If you ran into any trouble, try checking out Apple’s documentation in case anything has changed since the publication of this blog post.
Copy the Key ID and save it somewhere as you'll need it to paste in Plugin settings later on.
Warning: Sometimes, the Key ID might not be fully copied. Please make sure the full Key ID value is copied properly.
Image without caption
Congrats: You have successfully configured the Apple Developer Account. Now, you can proceed with the plugin setups in your Bubble Editor.

Plugins Tab

1. Go to Plugins -> Sign in with Apple plugin in your Bubble Editor, and paste the obtained 🔑 Keys from your Apple Developer Account into the following fields:
Image without caption
Done. Now, you can proceed with the Plugin API Configuration.​

Plugin API Configuration

💡
Tip: This part is the largest one, but don't get scared - you can do it!💪
1. Go to Backend workflows tab in your Bubble Editor, and create an endpoint with Response type Page redirect (302):
Image without caption
Note: Users can cancel the sign in action while being on Apple page, the plugin will catch this and respond with an error event, so you can use on error redirect to another page. You can create a separate page in your Bubble app and use it for error handling.
Image without caption
2. Now, it is required to set it to the initialize mode. Press the Detect data button, and leave the following popup as is:
Image without caption
3. Click on the generated URI to copy it.
Warning: Please do not cancel the popup, but simply leave it open.
4. Open your editor in a second browser tab so you leave the detecting mode open. Go to Design tab, and drag the ✔SignInWithApple element into your working space wherever you want (our demo app example):
Image without caption
Note: Please carefully add the plugin elements on the page. Due to Apple's technology, you can add only one Sign in with Apple button. Otherwise, it may cause conflicts.
5. Click on the plugin element to open its property editor. Paste the generated URI into the Redirect URI field:
Image without caption
​6. Now, it is time to try the Sign in with Apple for the first time. Preview the app, and hit the🍎button:
7. Go back to your first editor tab where detecting data. You should see these fields:
Image without caption
Note: Remember to hit the Save button.
8. Go back to Design tab and remove the /initialize path from the Redirect URI field.
Before:
Image without caption
Now:
Image without caption
Image without caption
App version is a Bubble state that detects automatically which app version is in use: version test or version live.
9. Now, add the Apple SignIn - Authorize User action as the first step for the created endpoint in your Backend workflows:
Image without caption
10. Click on the Step 1: Apple SignIn - Authorize User action, and configure the following fields (but with your own values for the Private Key and Redirect URL):
Image without caption
  • Response Code - this is in the received data. Just use the Request Data’s code.
  • Redirect URL - current endpoint URL should be the same as in the plugin element Redirect URI field (without the /initialize path).
  • Id Token - this is in the received data. Just use the Request Data’s id_token.
  • User Data - this is the obtained data from the detection stage. Just use the Request Data's user.
Note: The Private Key in the endpoint, downloaded from Apple, might contain /n characters. You will need to remove these /n characters from your key. Please follow the steps bellow:
  1. Download the file from Apple with the key
  1. Open the key through the Notepad++ (or any code editor you prefer)
  1. Here is how to "find and replace" in Notepad++ https://superuser.com/questions/34451/notepad-find-and-replace-string-with-a-new-line
  1. Paste the edited key into the Private Key field.
The key should look like this after removing the /n characters:
Image without caption
11. Next, add the Sign the user up action for Step 2, and set the Email, Password and condition the following way:
Image without caption
  • Email - use Result of step 1 (Apple SignIn - Authorize User)'s User email
  • Password - just use the Calculate RandomString
  • Only when - use the Search for Users:first item is empty (meaning, the signup action will run only if the user doesn't have an account)
Note: It is not recommended to have the user_id used as a password because we do not have access to it during login process in the frontend. The signup workflow will always run in the backend, and login workflow - in the frontend.
We need to search for Users based on the email field, this way:
Image without caption
12. Next, we need to set the Login workflow. If the user has an account, your app will simply perform the login process.
​1⃣ First, add the Assign a temp password to a user action as Step 3:
Image without caption
  • User - use the Search for Users:first item
  • Only when - use the Search for Users:first item is not empty
When searching for Users, use the same email filtering for both searches:
Image without caption
Image without caption
2⃣ Second, add the Log the user in action as Step 4:
Image without caption
  • Email - use the Result of step 1 (Apple SignIn - Authorize User)'s User email
  • Password - use Result of step 3 (Assign a temp password to a user)
  • Stay logged in - use the yes value
  • Only when - use the Search for Users:first item is not empty
When searching for Users, use the same email filtering:
Image without caption
13. Go back to Design tab, where you'll need to configure the Login process in the frontend. Create a General -> Do when condition is true event, with the following condition:
Image without caption
Here, you need to use the Get data from page URL method and type in the user_id parameter of type text:
Image without caption
Then we need to set the workflow actions to actually log the user in.​
1⃣ First, search for the User in your database by unique id, where the id is equivalent to the user_id received from the page URL, and save the result into a state (give it a name you like):
Image without caption
2⃣ Second, create a temporary password based on the newly created state:
Image without caption
3⃣ Third, log the user in with the previously created password and the new state:
Image without caption
4⃣ Finally, use the Remove URL params action to basically remove all the parameters from URL, that contains data (it will remove the Apple-related params only).
💡
Tip: The login action does not need any conditions. The login must happen every time the URL has the user_id parameter even if user is signed up in backend.
Guess what? You have almost completed the setups...🙌​
⚠️
Warning: Before going live, remove the /version-test/ path from:
  1. the Redirect URl field in the property editor settings of the plugin element
  1. the Redirect URL field in the Apple SignIn - Authorize User action from Backend workflows

Those who have Custom Domain

1. Go to the Backend Workflows tab in your Bubble Editor, and create an endpoint with Response type Page redirect (302):
Image without caption
2. Now, it is required to set it to the initialize mode. Press the Detect data button, and leave the following popup as is. Note that even if you have your Custom Domain and your app link looks different, you need to use the link you see when the popup is open:
Image without caption
3. All other initialization steps are specified in the Plugin API Configuration section from step 2
4. After successful initialization of the plugin, go to your Apple Console. In the Return URLs fields add URLs separated by a comma from the backend with initializing (from the mentioned popup) and the links with your Custom Domain.  Example: https://example-app.com/version-test/api/1.1/wf/applesignin/initialize, https://app.ninalove.it/version-test/api/1.1/wf/applesignin, https://app.ninalove.it/api/1.1/wf/applesignin In case you don't know how looks your Custom Domain URL, go to the Settings tabs (API button).
Image without caption
5. After adding all URLs to your Apple console, use Custom Domain links for the Redirect URL for the Button.
Image without caption
and for the "Apple SignIn - Authorize User" action on the backend workflow
Image without caption

Plugin Features

This section isn't a required 😌 configuration, but simply a description of available features and some hints.

Plugin Elements

The plugin contains ✔ SignInWithApple visual element which should be used on your working page.
Image without caption
Note: The button language will be automatically set up by the Apple's script.
Click on the plugin element, and it will open its property editor:
Image without caption
  • Redirect URI - Backend workflows endpoint URL
  • Type - text to set up by Apple script, continue or sing in with Apple
  • Color - button background color, black or white
  • Enable border - show border around button
The plugin also comes with 🗑 AutoRemove URL params visual element which can be used on your working page.
Image without caption
Instead of using the Remove URL params action, you can place this element on page and it will automatically remove the params when a user has signed in with Apple or canceled it and has been redirected to the cancel page.
Note: If there are any params that you need, they will not be removed. The removing action and auto remover element detect only params associated with Sign in with Apple events.

Button Element Logic

Tip: Place the plugin element on the page where you want the button to appear. There is no need to set up the signup/login workflows on click or other events. This will be handled by Apple's script. Just check the Plugin API Configuration and set the required fields like Redirect URI.

Plugin Element Actions

  • Remove URL params A SignInWithApple - when a user is redirected from backend, the URL contains some params and this action will remove them (it will remove the Apple-related params only!)
  • Apple SignIn - Authorize User - used in the Backend workflows to authorize a user

Helpful?