Adding Apple Sign-in to FlowScript (The Slightly Harder One)

Fresh off getting Google Sign-in working, I figured Apple would be similar. It is... mostly. But Apple makes you jump through a few more hoops, and there's this weird secret key generation step that threw me off.

Also, quick heads up - if your iOS app offers any third-party login (like Google), Apple requires you to offer Sign in with Apple too. So this wasn't optional for FlowScript.

Same setup as before: React Native app, Supabase backend.

Enable Apple in Supabase

Same drill as Google:

1. Supabase Dashboard → Authentication → Providers

2. Find Apple, enable it

3. Leave the fields empty for now

Apple Developer Portal (buckle up)

This is where Apple makes you work for it. You need to create three different things: an App ID, a Service ID, and a Private Key. I kept mixing up which was which, so I'll try to be clear about what each one does.

1. App ID

This is basically registering your app with Apple.

1. Go to Apple Developer Portal → Certificates, Identifiers & Profiles

2. Identifiers → click the + button

3. Select App IDs → App

4. Add a description, enter your Bundle ID (same one from Xcode)

5. Scroll down and check Sign in with Apple

6. Register it

2. Service ID

This confused me at first - why do I need a separate ID? Turns out this is what Supabase uses to talk to Apple's servers. It's like a web client ID.

1. Back to Identifiers → + button

2. This time select Services IDs

3. Give it a description and an identifier (I used com.myapp.flowscript.web)

4. Register it, then click on it to edit

5. Enable Sign in with Apple → Configure

6. Set Primary App ID to the App ID you just made

7. Domains: your-project-ref.supabase.co

8. Return URLs: https://your-project-ref.supabase.co/auth/v1/callback

9. Save everything

3. Private Key

This one's important - you download a .p8 file and you only get one chance to download it. I almost missed that warning.

1. Go to Keys → + button

2. Name it something recognisable

3. Enable Sign in with Apple → Configure → select your App ID

4. Register and download the key immediately

5. Note down the Key ID

4. Team ID

You'll need this too. Click your name in the top right of the Developer Portal → look at your membership details. It's a 10-character string.

Back to Supabase (the tricky bit)

Here's where I got stuck for a bit. You can't just paste the .p8 file contents into Supabase. You need to generate a JWT "client secret" using that key.

Supabase has a tool in their docs that does this for you. You'll need:

• Service ID (the com.yourapp.web one)

• Team ID

• Key ID

• Contents of the .p8 file

Generate the secret, paste it into Supabase's Secret Key field for Apple. Done.

Don't forget: this expires

Apple makes you regenerate this secret every 6 months. If you forget, sign-in just stops working one day. Set a calendar reminder for 5 months out. I've already added mine.

React Native Code

Install the package:

npm install @invertase/react-native-apple-authentication
cd ios && pod install && cd ..

In Xcode, you need to add the capability:

• Select your target → Signing & Capabilities → + Capability → Sign in with Apple

The actual code is similar to Google - get the idToken from Apple's library, pass it to Supabase. Won't dump my whole auth provider here, but that's the pattern.

Stuff I Learned the Hard Way

You can't test on the simulator. Apple Sign-in only works on real devices. I spent 20 minutes wondering why the button wasn't doing anything before I remembered this.

Apple only gives you the user's name once. The first time someone signs in, you get their full name. Every time after that, it's null. If you need to store it, grab it on that first sign-in and save it to your database immediately. I almost missed this and would've lost all my users' names.

That's two OAuth providers done. Google was easier, Apple has more steps, but neither was as scary as I thought they'd be. The hardest part is honestly just keeping track of all the different IDs and where each one goes.