Apple Sign In

This guide walks you through implementing Login with Apple in your Lovable application, ensuring compatibility with both web and native mobile apps built with Despia.

Prerequisites

  • Active Apple Developer account

  • Lovable project using Lovable Cloud as backend

  • (Optional) Despia blueprint for native mobile app compatibility

1

Implement Frontend Setup

Start by asking Lovable to implement Apple JS (Apple's JavaScript library for native Login with Apple):

implement Apple JS inside of my app and start with the front end setup.

Lovable will create the necessary frontend components and integrate Apple's authentication library.

2

Register Your App ID

  1. Go to Apple Developer Console

  2. Navigate to Certificates, Identifiers & Profiles

  3. Select Identifiers

  4. Create or select your existing App ID

  5. Add the Sign in with Apple capability

  6. Save your configuration

Note: If using Despia, your Bundle ID is automatically generated. You can find it in your Despia project settings.

3

Create Service ID

  1. In Apple Developer Console, create a new Service ID

  2. Use the format: [your-bundle-id].appleauth

  3. Enable Sign in with Apple

  4. Click Configure

4

Configure Callback URLs

Ask Lovable for your callback URL structure:

what are my callback URLs/URL so I can register it with Apple

Then specify your preferred callback path:

make the Apple auth callback URL for OAuth /callback/Apple

In Apple Developer Console:

  1. Add your Web Domain (your Lovable app URL without path)

  2. Add your Return URL (the full callback URL Lovable provided)

  3. Click Done and Save

5

Provide Service ID to Lovable

Copy your Service ID from Apple Developer Console and provide it to Lovable:

this is our service ID for Apple Auth:
[paste-your-service-id-here]
6

Set Up Backend Authentication

Since Lovable Cloud doesn't natively support Login with Apple, you'll need custom edge functions:

now set up the back end so when we go to /callback/apple it gets all the parameters and starts the back end auth token process and logs the user in.

Then specify the custom implementation:

Lovable Cloud does not support Apple login yet. Please implement it custom via edge functions that will do the whole job.

Use the "DESPIA README" references for that
7

Configure Apple Private Key

  1. In Apple Developer Console, go to Keys

  2. Create a new key with Sign in with Apple enabled

  3. Configure it with your App ID (Bundle ID)

  4. Download the private key (.p8 file) - you can only download this once!

  5. Copy the key ID shown in the console

Provide the private key to Lovable when prompted, followed by the key ID:

what about the key id

Then paste your key ID when requested.

8

Testing Your Implementation

Test on web first:

  1. Publish your Lovable project

  2. Open in Safari (for best Apple integration)

  3. Click "Login with Apple"

  4. Complete the authentication flow

The authentication should redirect you to Apple, then back to your app with a successful login.

Mobile App Considerations

When using Despia to convert your Lovable app to a native mobile application:

  • Apple JS automatically uses native iOS dialogs on Apple devices

  • The same implementation works seamlessly on both web and mobile

  • Android devices will see the web-based Apple authentication flow

Security Best Practices

After implementing Login with Apple, address any security warnings:

  1. Review Lovable Cloud's security panel

  2. Fix row-level security policies as suggested

  3. Ensure user data is properly protected

Troubleshooting

Authentication redirects but doesn't log in

Ensure your edge function properly redirects to Supabase's verify endpoint:

it works but the auth fails at the last step with this error:
[paste-error-here]

please check the logs to see what's going on

Old edge functions causing conflicts

If you have multiple Apple auth edge functions, specify which to use:

make sure to only use the authentication callback function for Apple auth that we just created. The other Apple auth functions are old and can be deleted.

Why Custom Implementation?

Lovable Cloud (built on Supabase) doesn't yet expose Login with Apple in its UI. Custom edge functions provide:

  • Full control over the authentication flow

  • Better handling of Apple's privacy features (email masking)

  • Flexibility for user account linking logic

  • Support for changing email addresses

Additional Resources

Need Help?

For additional support or questions, please contact our support team at support@despia.com

Updated on
Setup Guides
Debugging