🚀 Join the waitlist now! waitlist.floot.dev
LogoFlootdocs
Social Auth

Apple

Set up Sign in with Apple for your Floot application.

Sign in with Apple requires a paid membership to the Apple Developer Program. Sign in with Apple is one of the restricted services which is not available for free with just an Apple ID (source).

Apple Developer Console Setup

Create App ID

Go to identifiers section of the console → filter by App IDs (upper right menu) → click the + button (upper left, next to "Identifiers") → App IDs → App

  • Description > give a meaningful description
  • Bundle ID > can be found:
    • Open the ios (or macos if you are setting up that platform) folder of your Flutter project in Xcode (right click on the folder → Open in Xcode)
    • Runner (sidebar) → General (tab bar) > Runner (TARGETS sidebar) → Identity → Bundle Identifier
  • Capabilities (tab bar) > select Sign in with Apple

→ Continue → Register

When using Supabase Cloud, register all of the App IDs that will be using your Supabase project in the Apple provider configuration in the Supabase dashboard under Client IDs.

Service ID & Keys (Android, Web, Windows)

Create Service ID

Go to identifiers section of the console → filter by Services IDs (upper right menu) → click the + button (upper left, next to "Identifiers") → Services IDs

  • Description > give a meaningful description
  • Identifier > use a unique reverse-domain (e.g. com.domainname.appname.web)

→ Continue → Register

Configure Service ID

Open the newly created service ID → enable Sign in with Apple → Configure

  • Primary App ID > choose the App ID you previously created in the step before
  • Domains and Subdomains > options:

Apple does not accept http protocol, but there is a solution using Local Port Forwarding with VS Code-based editors.

Know that the forward URL generated by this method is temporary. Meaning you'll have to repeat this process every-time you quit the editor (mainly the visibility which tends to go back in private state). To have have a static URL, you can use Zrok (open source) or Ngrok.

  • From your code editor, open the terminal.
  • PORTS (tab bar) → Forward a Port → 54321
  • Right click on created port → Port Visibility → Public
  • Use the generated endpoint (without the https protocol) to redirect Apple events to your Supabase local instance.

Example generated endpoint with https: https://3k5jk495-54321.abc1.devtunnels.ms/

<generated.forward.address.without.https>

Generated endpoint without the https: 3k5jk495-54321.abc1.devtunnels.ms

<project-id>.supabase.co
<your.domain.without.https>
  • Return URLs > options:

Use the FULL HTTPS endpoint generated above.

<generated.forward.address>/auth/v1/callback

e.g. https://3k5jk495-54321.abc1.devtunnels.ms/auth/v1/callback

https://<project-id>.supabase.co/auth/v1/callback
https://<your.domain>:54321/auth/v1/callback

Create & Download Key

Go to keys section of the console → click the + button (upper left, next to "Keys")

  • Key Name > give meaningful name
  • Key Usage Description (optional) > give a meaningful description
  • Select Sign in with Apple from the list → Configure
    • Primary App ID > choose the App ID you previously created in the step before → Save

→ Continue → Register → Download

Make sure you safely store the AuthKey_XXXXXXXXXX.p8 file. If you ever lose access to it, or make it public accidentally, revoke it from the Apple Developer Console and create a new one immediately. You will also have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring reminder in your calendar!

Generate Secret Key

Keep in mind that you will have to renew your secret key every 6 month! So make sure to keep track of it.

Go to Supabase's Apple Docs page → scroll until you find a tool (Ctrl/Cmd + F to search "tool" keyword can also help)

  • Account ID > it corresponds to your team id in your developer account
  • Service ID > refers to the Service ID created above
  • Choose File > refers to the downloaded key from the previous step

→ Generate Secret Key

When using Supabase Cloud, add the information you configured above to the Apple provider configuration in the Supabase dashboard.

Floot App Setup

Xcode Configuration

At this point you should have added the Sign in with Apple capability to your own app.

In case you don't have Automatically manage Signing turned on in Xcode, you will need to recreate and download the updated Provisioning Profiles for your app, so they include the new Sign in with Apple capability. Then you can download the new certificates and select them in Xcode.

In case XCode manages your signing, this step will be done automatically for you. Just make sure the Sign in with Apple capability is active as described below.

Additionally this assumes that you have at least one iOS device registered in your developer account for local testing, so you can run the example on a device.

Enable Apple Sign in capability for iOS:

  • Open your ios or macos folder in Xcode (right click on the folder → Open in Xcode)
  • Go to Runner (under "TARGETS") -> Signing & Capabilities
  • Click on the + Capability button to add a capability
  • Add Sign in with Apple
  • Now open a terminal in your project folder and execute the follow commands
    • cd ios or macos
    • bundle install, to install the Ruby dependencies used for Cocoapods
    • bundle exec pod install, to install the Cocoapods for the iOS project

Environment Variables

Supabase supabase/.env* file:

# Apple Developer Console -> Identifiers -> App IDs -> Bundle ID.
# You can provide many IDs separated by commas like this: "com.example.ios,com.example.macos"
OAUTH_APPLE_CLIENT_ID=

Environment Variables

Supabase supabase/.env* file:

  • Client ID
# Apple Developer Console -> Identifiers -> Services IDs -> Identifier.
# You can provide many IDs separated by commas like this: "com.example.web,com.example.mobile"
# For some reason, only the first ID of the list is used in the OAuth process, so make sure to make that one the Service ID.
OAUTH_APPLE_CLIENT_ID=
  • Redirect URL
# Supabase Auth Service callback url to complete Apple OAuth sign-in.
OAUTH_APPLE_REDIRECT_URI=

OAUTH_APPLE_REDIRECT_URI corresponds to the value you provided as Return URL above! See Configure Service ID.

  • Secret Key
# Apple secret key for OAuth.
OAUTH_APPLE_SECRET=

OAUTH_APPLE_SECRET corresponds to the secret key you generated above! See Generate Secret Key.

  • Redirect URI
# Supabase Auth Service callback url to complete OAuth sign-in.
SUPA_AUTH_EXTERNAL_REDIRECT_URI=

Possible values

http://127.0.0.1:54321/auth/v1/callback
https://<project-id>.supabase.co/auth/v1/callback
https://<your.domain>:54321/auth/v1/callback

OAuth deep link redirection (optional)

Before You Proceed

Only mandatory if you did not provide a custom organization at Floot app creation! More info here!

Apple Sign in with Supabase on Web, macOS, Windows, and Linux is done through the OAuth method.

This method of signing in is web based, and will open a browser window to perform the sign in. For non-web platforms, the user is brought back to the app via deep linking, which is already setup by default in every Floot app.

→ Setup OAuth redirection by following this guide!

Environment Variables

Supabase supabase/.env* file:

  • Client ID
# Apple Developer Console -> Identifiers -> Services IDs -> Identifier.
# You can provide many IDs separated by commas like this: "com.example.web,com.example.mobile"
# For some reason, only the first ID of the list is used in the OAuth process, so make sure to make that one the Service ID.
OAUTH_APPLE_CLIENT_ID=
  • Redirect URL
# Supabase Auth Service callback url to complete Apple OAuth sign-in.
OAUTH_APPLE_REDIRECT_URI=

OAUTH_APPLE_REDIRECT_URI corresponds to the value you provided as Return URL above! See Configure Service ID.

  • Secret Key
# Apple secret key for OAuth.
OAUTH_APPLE_SECRET=

OAUTH_APPLE_SECRET corresponds to the secret key you generated above! See Generate Secret Key.

  • Redirect URI
# Supabase Auth Service callback url to complete OAuth sign-in.
SUPA_AUTH_EXTERNAL_REDIRECT_URI=

Possible values

http://127.0.0.1:54321/auth/v1/callback
https://<project-id>.supabase.co/auth/v1/callback
https://<your.domain>:54321/auth/v1/callback

OAuth deep link redirection (optional)

Before You Proceed

Only mandatory if you did not provide a custom organization at Floot app creation! More info here!

Apple Sign in with Supabase on Web, macOS, Windows, and Linux is done through the OAuth method.

This method of signing in is web based, and will open a browser window to perform the sign in. For non-web platforms, the user is brought back to the app via deep linking, which is already setup by default in every Floot app.

→ Setup OAuth redirection by following this guide!

Xcode Configuration

At this point you should have added the Sign in with Apple capability to your own app.

In case you don't have Automatically manage Signing turned on in Xcode, you will need to recreate and download the updated Provisioning Profiles for your app, so they include the new Sign in with Apple capability. Then you can download the new certificates and select them in Xcode.

In case XCode manages your signing, this step will be done automatically for you. Just make sure the Sign in with Apple capability is active as described below.

Additionally this assumes that you have at least one iOS device registered in your developer account for local testing, so you can run the example on a device.

Enable Apple Sign in capability for iOS:

  • Open your ios or macos folder in Xcode (right click on the folder → Open in Xcode)
  • Go to Runner (under "TARGETS") -> Signing & Capabilities
  • Click on the + Capability button to add a capability
  • Add Sign in with Apple
  • Now open a terminal in your project folder and execute the follow commands
    • cd ios or macos
    • bundle install, to install the Ruby dependencies used for Cocoapods
    • bundle exec pod install, to install the Cocoapods for the iOS project

Environment Variables

Supabase supabase/.env* file:

# Apple Developer Console -> Identifiers -> App IDs -> Bundle ID.
# You can provide many IDs separated by commas like this: "com.example.ios,com.example.macos"
OAUTH_APPLE_CLIENT_ID=

Environment Variables

Supabase supabase/.env* file:

  • Client ID
# Apple Developer Console -> Identifiers -> Services IDs -> Identifier.
# You can provide many IDs separated by commas like this: "com.example.web,com.example.mobile"
# For some reason, only the first ID of the list is used in the OAuth process, so make sure to make that one the Service ID.
OAUTH_APPLE_CLIENT_ID=
  • Redirect URL
# Supabase Auth Service callback url to complete Apple OAuth sign-in.
OAUTH_APPLE_REDIRECT_URI=

OAUTH_APPLE_REDIRECT_URI corresponds to the value you provided as Return URL above! See Configure Service ID.

  • Secret Key
# Apple secret key for OAuth.
OAUTH_APPLE_SECRET=

OAUTH_APPLE_SECRET corresponds to the secret key you generated above! See Generate Secret Key.

  • Redirect URI
# Supabase Auth Service callback url to complete OAuth sign-in.
SUPA_AUTH_EXTERNAL_REDIRECT_URI=

Possible values

http://127.0.0.1:54321/auth/v1/callback
https://<project-id>.supabase.co/auth/v1/callback
https://<your.domain>:54321/auth/v1/callback

OAuth deep link redirection (optional)

Before You Proceed

Only mandatory if you did not provide a custom organization at Floot app creation! More info here!

Apple Sign in with Supabase on Web, macOS, Windows, and Linux is done through the OAuth method.

This method of signing in is web based, and will open a browser window to perform the sign in. For non-web platforms, the user is brought back to the app via deep linking, which is already setup by default in every Floot app.

→ Setup OAuth redirection by following this guide!