Plugins
Templates

old Sign-In with Apple Plugin

Link to plugin page: https://zeroqode.com/plugin/sign-in-with-apple-1575475552052x418799001167781100

Introduction

Sign in with Apple makes it easy for users to sign in to your apps and websites using their Apple ID. Instead of filling out forms, verifying email addresses, and choosing new passwords, they can use Sign in with Apple to set up an account and start using your app right away.

Prerequisites

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

Plugin Setup

How to get Plugin keys

Key_ID - Can be found in Account -> Certificates.. -> keys -> [your key name] -> Key ID

Team_ID - Can be found in the top right corner, you need the ID from right side without name

Service_ID - Can be found in Account -> Certificates.. -> Identifiers and set filter to Services ID

Setting up Keys in Plugin Settings

When you've got your keys from Developer Account, place them in plugin settings fields as shown:

Plugin Element Proprieties

The plugin contains SignInWithApple visual element which should be used on page.

The plugin comes also with Autoremove URL params visual element which can be used on page.

Button Styles

Button recommended style specifications:

https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/

Note: The button language will be automatically set up by apple script.

Plugin elements proprieties

1. SignInWithApple Element

  • Redirect URI - API workflow endpoint url.

  • Type - text to set up by apple script “Continue with Apple” or “Sing in with Apple”.

  • Color - button background color, only white or black.

  • Enable border - show border around button.

2. AutoRemove URL params Element

Instead of using action, you can place this element on page and it will automatically remove params when user signed in with apple or when user canceled it and was redirected to this page.

Note: If there are any params that you need, they will not be removed, remove action and auto remover detects only params associated with Sign in with Apple events.

Button Element Logic

Place the plugin element on the page where you want the button to appear, no need to set up workflow for on click or other events, this is will be made by apple script. Check the plugin proprieties you require and set the Redirect URI.

Plugin Actions

  • Remove URL params A SignInWithApple - When the user is redirected from backend, the url contains some params and to remove them this action, for example with condition, do when Get user_id from page URL is not empty -> run action

  • Apple SignIn Authorize User - is used to authorize user , used in API workflow for authorization.

Plugin API Workflow

API workflow logic

  1. Create an Endpoint with response type Page redirect (302)

On this first step, you should set it to initialize mode (find in bubble docs more about it), copy and paste the initialize URL in the plugin element Redirect URI field, and now try to sign for the first time.

Cancel sign in plugin event

User can cancel sign in action while he/she is 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 should see these fields:

Save it and don’t forget to remove “/initialize” from the redirect URL.

2. Now add the Authorize User action as the first step in the workflow.

  • Private Key - the key from a file that you downloaded while creating a Key at developer.apple.com.

  • Response Code - this is in the received data Request Data’s code.

  • Redirect URI - current endpoint URL should be the same as in plugin element redirect field.

  • Id Token - this is in the received data Request Data’s id_token.

The Private Key in the Endpoint, downloaded from the Apple Connect, can contain /n characters. Users who will need to remove /n symbols from the key after they've downloaded it. Please use the steps to do this :

  1. Download the file from Apple with the key

  2. Open the key through the *Notepad ++

  3. Here is guidance on the "find and replace" in Notepad -https://superuser.com/questions/34451/notepad-find-and-replace-string-with-a-new-line

  4. Paste the edited key into the Private Key field.

*Note: It is possible to use any editor to modify they obtained key.

Example:

Private key modified

3. The next steps should be User registration and Login workflows , where the User email from the first step is used and as a password a random string well. It is not recommended to have a user_id used as a password as we do not have access to it in the frontend during login. SignUp workflow will always be on the backend, but side Login workflow on the front end.

Sign-up: For signup use the workflow to signup the user with obtained email address from user.

Don't forget to add a condition to the 'Sing in' action on the demo page as a sign to happen only if the user does not have an account.

If user has an account , use action to login with a temporary password:

Log in: On the front end, on the login page, we do the event "do when" with the condition" GET user_id is not empty and the current user isn't logged ". The first step search the user in BD after Unique Id, unique id has to be equivalent with user_id from Url and save it in state. In the next step, we create a temporary password and login user with a temporary password, with latest step is to remove parameters from Url.

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 signedup on the back end.

4. Great, you're all set!

Before deploying to live, remove /version-test/ parameter in field Redirect URl from Element action and API workflow action.

Demo to preview the settings: