Plugins
Templates
Powered By GitBook
Setup Guide
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.
Apple: See the instructions on how to set your own Apple Developer Account up until you reach to this section.
2. Then go to Account -> Certificates, IDs and Profiles -> Keys -> [your key name] and locate the Key ID.
Copy the Key ID
Copy the Key ID and save it somewhere as you'll need it later on.
Warning: Sometimes, the Key ID might not be fully copied. Please make sure the full Key ID value is copied properly.
2. Locate the Team ID, which can be found in the upper-right corner.
Copy the ID from the Team ID
Copy just the ID from the Team ID, and store it somewhere as you'll need it later on.
3. Locate the Service ID, which can be found in Account -> Certificates, IDs and Profiles -> Identifiers, and set the filter to Services IDs:
Filter the Identifiers by Service ID
Copy this value under the IDENTIFIER column, which is your Service ID. Store it somewhere as you'll need it later on.
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:
Paste the obtained Keys
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):
Create a new Page redirect (302) endpoint
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.
​
​
2. Now, it is required to set it to the initialize mode. Press the Detect data button, and leave the following popup as is:
Detect data
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):
Drag the SignInWithApple element
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:
Paste the generated Redirect URI
6. Now, it is time to try the Sign in with Apple for the first time. Preview the app, and hit the
🍎
button:
Try to sign in for the first time
7. Go back to your first editor tab where detecting data. You should see these fields:
API Workflow Request data response
Note: Remember to hit the Save button.
8. Go back to Design tab and remove the /initialize path from the Redirect URI field.
Before:
Redirect URI with "/initialize" path
Now:
Redirect URI without "/initialize" path
9. Now, add the Apple SignIn - Authorize User action as the first step for the created endpoint in your Backend workflows:
Step 1: Apple SignIn - Authorize User
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):
Configure the Apple SignIn - Authorize User action
    Private Key - get this key from the file that you downloaded while creating the Key ID at https://developer.apple.com/.
    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
    2.
    Open the key through the Notepad++ (or any code editor you prefer)
    4.
    Paste the edited key into the Private Key field.
The key should look like this after removing the /n characters:
Private Key modified
11. Next, add the Sign the user up action for Step 2, and set the Email, Password and condition the following way:
Step 2: Sign the user up into your Bubble app
    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 backend, and login workflow - in frontend.
We need to search for Users based on the email field, this way:
Search for Users by email
12. Next, we need to set the Login workflow. If 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:
Step 3: Assign a temp password to a user
    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:
Search for Users by email (User)
Search for Users by email (Condition)
​
2⃣
Second, add the Log the user in action as Step 4:
Step 4: Log the user in
    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:
Search for Users by email
13. Go back to Design tab, where you'll need to configure the Login process in frontend. Create a General -> Do when condition is true event, with the following condition:
Create a "Do when condition is true" event
Here, you need to use the Get data from page URL method and type in the user_id parameter of type text:
Get "user_id" from page URL
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 with the user_id received from the page URL, and save the result into a state (give it a name you like):
Search for User by unique id
​
2⃣
Second, create a temporary password based on the newly created state:
Assign a temp password to a user (based on the new state)
​
3⃣
Third, log the user in with the previously created password and the new state:
Log the user in (with the previously created temp password)
​
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
    2.
    the Redirect URL field in the Apple SignIn - Authorize User action from Backend workflows
Congrats! You have successfully configured the plugin in your Bubble Editor. Now, you can test it out on preview and go live with your app.
​

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.
"SignInWithApple" plugin element
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:
"SignInWithApple" property editor
    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.
"AutoRemoveURLparams" plugin element
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

​
πŸ“œ
Table of Contents

In order to properly configure the plugin please read the *required sections of this documentation.
Last modified 4mo ago