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):
Apple requires that all apps using the Sign in with Apple button strictly follow their official Human Interface Guidelines regarding appearance, size, colors, and branding.
Customization of the button is limited and must not conflict with Appleβs standards.
Non-compliance may result in App Store rejection or issues with Appleβs service approval process.
Always use the official button assets and review Appleβs requirements before releasing your app.
If you implement the Sign in with Apple button on a web page and do not follow Appleβs guidelines, several things can happen:
- Apple may block or disable your appβs Sign in with Apple functionality if they detect non-compliance.
- If your web app is linked to a native iOS/macOS app, your app could be rejected during App Store review.
- Apple may request you to update your implementation to comply, and in some cases, may even restrict access to their authentication API.
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 isΒ15.
- 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Β
modetoΒleft-align. To configure the logo size on the button, set theΒlogo-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
