Templates
Template Setup Guides

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

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 initialize url in the plugin element Redirect URI field and now try to sing for the first time.

Cancel sign in plugin event

User can cancel sign in action while he/she is on Apple page, plugin will catch this and respond with an error event, so you can use on error redirect to another page.

You should see this fields:

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

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

  • Private Key - the key from 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 endpoind url, should be the same as in plugin element redirect field.

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

Example:

3. Next steps should be User registration and login logic, we used User ID from first step as password and User email from first step as well. User ID will always be unique and it won’t change over time so you can easily use it as password. Example:

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: