Demo to preview the plugin:
✏️ Introduction
A must-have no-code plug-in for a Bubble app that allows user authentication with Apple ID and is submitted to App Store for publishing. Once your app is reviewed by the Apple Review Team, they will require Apple Signing to be implemented as one of the sign-in options.
Moreover, 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 your development account at: https://developer.apple.com/sign-in-with-apple/get-started/
Note: Apple provides several Sign in with Apple buttons you can use to let people set up an account and sign in.
To see the guidance please go here: https://developer.apple.com/design/human-interface-guidelines/technologies/sign-in-with-apple/buttons/
🎬 Plugin Overview
🚀 Setup Guide
The plugin guide consists of two parts:
- Apple Developer Account - to configure your own developer account,
- Plugins Tab - to configure the Keys,
How to setup
1. You must have a developer account at Apple to interact with the plugin. Create your development account here: Apple console
Create an APP ID
From the sidebar, choose Identifiers then click the blue plus icon.
1. Choose App IDs in this first step
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.
A bundle ID or bundle identifier uniquely identifies an application in Apple's ecosystem. This means that no two applications can have the same bundle identifier. To avoid conflicts, Apple encourages developers to use reverse domain name notation for choosing an application's bundle identifier.
In this example, I’m using
io.zeroqode-demo-20.bubbleapps since the domain this app will be running on is zeroqode-demo-20.bubbleapps.ioYou’ll also want to scroll down through the list of capabilities and check the box next to Sign In with Apple.
2. Choose Services IDs in this first step and click continue.
identifier - A string that identifies the user interface item
In this example, I’m using
io.zeroqode-demo-20 since the domain this app will be running on is zeroqode-demo-20
After your registration Services id, on the Identifiers page, will find your new Service id and make click on it.
Checkbox ENABLED makes true and click configure. 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.
you click on the blue icon.
Primary App id - set App id which created in 1 point.
Add in the fields Domains and Subdomains, your domain and Redirect URLs.
Add two redirect URLs separated by comma, one for the version test and live.
Click the button next, and Save.
In case you have a Custom Domain, enter the Return URLs of your custom domain. Additionally, add Custom Domain URI in the button filed - Redirect URI.
Copy the identifier and set it in the plugin settings.
3. Plugin element
Open your editor to the design tab, and drag the ✔SignInWithApple element into your working space wherever you want (our demo app example):
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.
Click on the plugin element to open its property editor.
- Redirect URI - set the page where the user
sign in
- Type - text to set up by Apple script,
continue,sing inorsing upwith Apple
- Colour - set the colour property to one of the following values:
blackorwhiteto configure the background colour of the Sign in with Apple button.
- Enable border - show border around the button.
- Apple language - сhoose the language.
- Mode - set the
modeproperty to one of the following values:centre-align,left-align,logo-onlyto configure the appearance of the Sign in with Apple button
- Border Radius - set the border-radius property to a number between
0—50to configure the border radius of the button. The default is15.
- Logo Size - You can control the size and position of the Apple logo on the Sign in with Apple button. These settings only work if you set
modetoleft-align. To configure the logo size on the button, set thelogo-sizeproperty to one of the following values:small,mediumorlarge.
- Width - ⚠️Work only with
left-align. Apple official documents state that the data width property should be in the of range 130-375. The default value is 100% to fit the container size.
- Height - ⚠️Work only with
left-align. Apple official docs state that the data height property should be in the range of 30-64. The default value is 100% to fit the container size.
Element Events
Apple ID Sign-In on Success - This event will occur when the client has successfully passed apple authentication and apple has sent us data such as email and password.
Element States
Email - here will be the customer email sent by Apple.
sub - this is a unique one offered to us by apple and we can use it as a password.
First Name and Last Name - the name with which the user registered in Apple. ⚠️Remember that the name is sent only the first time the user logs in.
4. Set workflow for login
- Add the event “Apple ID Sign-In on Success” in the workflow tab
- Add the action “Sign the user up” and “Log the user in” to the event “Apple ID Sign-In on Success”
3. Fill in the action fields and condition
- Email- e-mail state
- Password - Sub state for password
- Stay logged in - no
