💡 About this Plugin
🔌 Zeroqode Templates: boost the Development of your App
🎓 Zeroqode Lab: no-code Courses and Tutorials
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/
Give it a try here https://zeroqode-demo-20.bubbleapps.io/signin_with_apple Preview the editor here https://bubble.io/page?name=signin_with_apple&id=zeroqode-demo-20&tab=tabs-1 🤩
🎬 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.bubbleappssince the domain this app will be running on is
You’ll also want to scroll down through the list of capabilities and check the box next to Sign In with Apple.
Services IDs in this first step and click
identifier - A string that identifies the user interface item In this example, I’m using
io.zeroqode-demo-20since the domain this app will be running on is
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
- Type - text to set up by Apple script,
sing upwith Apple
- Colour - set the colour property to one of the following values:
whiteto 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:
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 is
- 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
left-align. To configure the logo size on the button, set the
logo-sizeproperty to one of the following values:
- 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.
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.
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
This section will help you locate all the updates about the plugin improvements, refactoring and bug fixes.
⚙released on 9 Feb 2021
LOTS OF GOOD STUFF🎉
- 🎉 New plugin documentation
- 🔧 Added "Setup Guide" section
- ❓ Added "FAQs" section
- ✅ Added "Changelogs" section
- 🎬 Added "Plugin Overview" section
- 📄 Added "Table of Contents" everywhere, for a much better navigation
- Lots of cool screenshots for guidance
- Updated icon
⚙ released on the 11th of Dec 2019
- Initial Release
⚙ released on 28 May 2020
- Fixed passing the plugin name state
⚙ released on 10 Dec 2020
- Fixed action "Remove URL Params"
⚙️ released on the 9th of Sep 2022
- Possibility to change the language
⚙️ released on the 15th of Sep 2022
- Minor fixes
⚙️ released on the 28th of Dec 2022
- plugin optimisation (reduces login time)
⚙️released on 9th of Jan 2023
- minor fix