Login with Apple

To enable Apple Auth for your project, you need to set up a Apple OAuth application and add the application credentials to your Teta Auth.

Authentication comprises of following steps:

1. Create and configure a Apple Project

1.1 Access your Apple Developer account

1.2 Download your secret key

Now you’ll need to download a¬†secret key¬†file from Apple that will be used to generate your¬†client_secret.

  • Go to¬†Certificates, Identifiers & Profiles.
  • Click on¬†Keys¬†at the left.
  • Click on the¬†+¬†sign in the upper left next to¬†Keys.
  • Enter a¬†Key Name.
  • Check¬†Sign In With Apple.
  • Click¬†Configure¬†to the right.
  • Select your newly-created Services ID from the dropdown selector.
  • Click¬†Save¬†at the top right.
  • Click¬†Continue¬†at the top right.
  • Click¬†Register¬†at the top right.
  • Click¬†Download¬†at the top right.
  • Save the downloaded file — this contains your “secret key” that will be used to generate your¬†client_secret.
  • Click¬†Done¬†at the top right.

1.3 Obtain an App ID

  • Go to¬†Certificates, Identifiers & Profiles.
  • Click on¬†Identifiers¬†at the left.
  • Click on the¬†+¬†sign in the upper left next to¬†Identifiers.
  • Select¬†App IDs¬†and click¬†Continue.
  • Select type¬†App¬†and click¬†Continue.
  • Fill out your app information:
    • App description.
    • Bundle ID (Apple recommends reverse-domain name style, so if your domain is acme.com and your app is called roadrunner, use: “com.acme.roadrunner”).
    • Scroll down and check¬†Sign In With Apple.
    • Click¬†Continue¬†at the top right.
    • Click¬†Register¬†at the top right.

1.4 Obtain a Services ID

This will serve as the client_id when you make API calls to authenticate the user.

  • Go to¬†Certificates, Identifiers & Profiles.
  • Click on¬†Identifiers¬†at the left.
  • Click on the¬†+¬†sign in the upper left next to¬†Identifiers.
  • Select¬†Services IDs¬†and click¬†Continue.
  • Fill out your information:
    • App description.
    • Bundle ID (you can’t use the same Bundle ID from the previous step, but you can just add something to the beginning, such as “app.” to make it app.com.acme.roadrunner”).
    • SAVE THIS ID — this ID will become your¬†client_id¬†later.
    • Click¬†Continue¬†at the top right.
    • Click¬†Register¬†at the top right.

ūüö®

Callback URL

https://auth.teta.so/auth/apple_callback

1.5 Configure your Services ID

  • Under¬†Identifiers, click on your newly-created Services ID.
  • Check the box next to¬†Sign In With Apple¬†to enable it.
  • Click¬†Configure¬†to the right.
  • Make sure your newly created Bundle ID is selected under¬†Primary App ID.
  • Add your domain to the¬†Domains and Subdomains¬†box (do not add¬†https://, just add the domain).
  • In the¬†Return URLs¬†box, type the callback URL of your app which you found in the previous step and click¬†Next¬†at the bottom right.
  • Click¬†Done¬†at the bottom.
  • Click¬†Continue¬†at the top right.
  • Click¬†Save¬†at the top right.

1.6 Generate a client_secret

The¬†secret key¬†you downloaded is used to create the¬†client_secret¬†string you’ll need to authenticate your users.

According to the Apple Docs it needs to be a JWT token encrypted using the Elliptic Curve Digital Signature Algorithm (ECDSA) with the P-256 curve and the SHA-256 hash algorithm.

At this time, the easiest way to generate this JWT token is with¬†Ruby. If you don’t have Ruby installed, you can¬†Download Ruby Here.

  • Install Ruby (or check to make sure it’s installed on your system).
  • Install¬†ruby-jwt.
  • From the command line, run:¬†sudo gem install jwt.

1. Create the script below using a text editor: secret_gen.rb

				
					require "jwt"

key_file = "Path to the private key"
team_id = "Your Team ID"
client_id = "The Service ID of the service you created"
key_id = "The Key ID of the private key"

validity_period = 180 # In days. Max 180 (6 months) according to Apple docs.

private_key = OpenSSL::PKey::EC.new IO.read key_file

token = JWT.encode(
{
iss: team_id,
iat: Time.now.to_i,
exp: Time.now.to_i + 86400 * validity_period,
aud: "https://appleid.apple.com",
sub: client_id
},
private_key,
"ES256",
header_fields=
{
kid: key_id
}
)
puts token
				
			

1. Edit the secret_gen.rb file:

  • key_file¬†= “Path to the private key you downloaded from Apple”. It should look like this:¬†AuthKey_XXXXXXXXXX.p8.
  • team_id¬†= “Your Team ID”. This is found at the top right of the Apple Developer site (next to your name).
  • client_id¬†= “The Service ID of the service you created”. This is the¬†Services ID¬†you created in the above step¬†Obtain a Services ID. If you’ve lost this ID, you can find it in the Apple Developer Site:
    • Go to¬†Certificates, Identifiers & Profiles.
    • Click¬†Identifiers¬†at the left.
    • At the top right drop-down, select¬†Services IDs.
    • Find your Identifier in the list (i.e. app.com.acme.roadrunner).
  • key_id¬†= “The Key ID of the private key”. This can be found in the name of your downloaded secret file (For a file named¬†AuthKey_XXXXXXXXXX.p8¬†your key_id is¬†XXXXXXXXXX). If you’ve lost this ID, you can find it in the Apple Developer Site:
    • Go to¬†Certificates, Identifiers & Profiles.
    • Click¬†Keys¬†at the left.
    • Click on your newly-created key in the list.
    • Look under¬†Key ID¬†to find your key_id.
2. From the command line, run: ruby secret_gen.rb > client_secret.txt.
3. Your client_secret is now stored in this client_secret.txt file.

2. Adding credentials to Teta

You must add the App credentials to your Teta project.

To add the credentials:

  • Select a Teta project and navigate to Teta Auth.
  • Select Settings.
  • Find Apple and enter the credentials.
  • When you are done, select Save.

3. Adding A Login Action

  • Select the Login with Google from the tree area.
  • Click on Actions + (on the right side of your screen).
  • Click on Action dropdown.
  • Find the Action Type dropdown and change it to Teta Auth.
  • Find the Gesture dropdown below and change it to OnTap.
  • Find the dropdown below and select Sign in with apple.
  • Finally in the Which Page? select the page that you want the user to sign in on once logged in.