Skip to content

Enabling Apple as an OAuth provider

Jump to bottom
Ari Mendelow edited this page Sep 17, 2024 · 8 revisions

The first thing to know about Apple is that they don't allow you to use Sign In with Apple on localhost, and require SSL. Therefore, if you want to test this locally, you'll need to alias your localhost URL, and then create an HTTPS cert for that domain. You can then configure your front end server to use this cert, and update your redwood.toml's host parameter to your alias. If there is demand for RedwoodJS specific guide on doing this, I'll write something up - let me know :)

For Apple, we need to collect the following four environment variables:

  • APPLE_TEAM_ID
  • APPLE_CLIENT_ID
  • APPLE_KEY_ID
  • APPLE_PRIVATE_KEY

We'll also need to add all of the redirect URIs that we'll be using - Apple requires that none of these contain localhost and that they're explicit - you cannot give it https://myapp.com and then use https://myapp.com/method.

Let's get started!

Prerequisites

  1. Create an Apple ID
  2. Sign up for an Apple developer account
  3. Sign in to the Apple Developer portal

Then...

Getting APPLE_TEAM_ID

  1. From the sidebar, click on Certificates, Identifiers and Profiles.
  2. Click Identifiers, and in the dropdown on the top right corner, make sure App IDs is selected. Then, click the blue plus icon, and select the App IDs option.
  3. Select the type App, and click Continue. Then, fill in a description ("My Redwood app", etc.) and bundle ID ("com.myapp", etc.)
  4. From the list of capabilities, make sure Sign In with Apple is checked. Hit continue to be taken to the confirmation screen.
  5. On the confirmation screen, you'll see your App ID prefix - this is your APPLE_TEAM_ID.

Getting APPLE_CLIENT_ID

  1. From the sidebar, click on Certificates, Identifiers and Profiles.
  2. Click Identifiers, and in the dropdown on the top right corner, make sure Services IDs is selected. Then, click the blue plus icon, and select the Services IDs option.
  3. Fill in a description ("My Redwood app service", etc.) and Identifier ("com.myapp.client", etc.). This identifier is your APPLE_CLIENT_ID.
  4. Hit continue to create your new Services ID.

Getting APPLE_KEY_ID

  1. From the sidebar, click on Certificates, Identifiers and Profiles.
  2. Choose Keys, and click the blue plus icon. Give your key a name ("Key for my Redwood app", etc.), and make sure Sign In with Apple is checked.
  3. Click Configure, and then in the Primary App ID dropdown, select the App ID that we created above when we were getting the APPLE_TEAM_ID. Hit Save.
  4. Hit Continue to proceed to the confirmation page. Verify once again that Sign In with Apple is checked, and click Register.
  5. You'll be taken to a page to Download Your Key. Download the key, and note the Key ID - this is your APPLE_KEY_ID.

Getting APPLE_PRIVATE_KEY

  1. In the previous step, you downloaded your private key. Open it in TextEdit, or the text editor of your choice. The contents of this file are your APPLE_PRIVATE_KEY.

Adding Website URLs

  1. Go back to the service you created above (at this link).
  2. Hit Configure next to Sign In with Apple. Click the blue plus icon next to Website URLs, and add the following:
  • Under Domains and Subdomains, enter your website's domain name ("myapp.com", etc.).
  • Under Return URLs, add the following, filling in your API URL so that these are complete URLs:
    • {your API url}/auth/oauth?method=signupWithApple
    • {your API url}/auth/oauth?method=loginWithApple
    • {your API url}/auth/oauth?method=linkAppleAccount

Using the Apple environment variables

Go ahead and add the four environment variables that you just collected to your environment. You'll do this in your .env file while working locally, and in your deployment settings for your hosting provider in production.

Make sure that you paste the APPLE_PRIVATE_KEY exactly as it is in that file, line breaks and everything. For example, in your .env, it'll look something like this:

APPLE_PRIVATE_KEY='-----BEGIN PRIVATE KEY-----
asdhfjkalsdfhkalsdfhrwipqfhsjakldfhaskldfhasjkldfhasjkldhf
asdjfals;kdfjasl;dfjalks;dfjal;sdfkjrufwqohfsjdklfhask
asfjhksdafhaslkdfhasjlkdhfaslkdjhfakjsdlhfajlksdjhflaksdjhf
asdfjalsdj
-----END PRIVATE KEY-----'

You'll also need to update redwood.toml's includeEnvironmentVariables parameter to include your APPLE_CLIENT_ID, otherwise it won't be available to your client, and your client won't be able to kick off the OAuth flow.

Enable Apple as a provider

Now, you can finally enable Apple as an OAuth provider!

Go to web/src/auth.ts, and make the following change:

 const oAuthClient = createOAuthClient({
   enabledProviders: {
+    apple: true
   },
 })

Then, go to api/src/functions/auth.ts, and make the following change:

  const oAuthHandler = new OAuthHandler(event, context, authHandler, {
    oAuthModelAccessor: 'oAuth',
    enabledProviders: {
+     apple: true,
    },
  })

Additionally, you may need to update your cookie config. Because Apple handles its redirect via form_post, if you want your cookie to come along for the ride (so that the server knows that your user is logged in), your cookie settings need to be as follows :

SameSite: 'None',
Secure: true,
Clone this wiki locally