React native apple sign in

HOW-TO: Sign in with Apple on React and React-Native using Node

Dealing with Apple is a pain, ask any devs around. So I’ll be writing a quick guide to setup Apple Sign in a couple of minutes (depending on Apple 🤷‍♂️)

Setting Up Developer Portal:

First, sign in to the Apple Developer Portal and enroll if you have not already, and then click on Certificates, Identifiers and Profiles.

Setting up App ID

From the sidebar, choose Identifiers then click the blue plus icon.

PS. If you have already set up your react-native-app you’ll see a different screen. Choose the right Bundle ID only and go to Adding Sign-in Capability.

Choose App ID

Now, Choose App IDs in this first step.

Now, choose a description and Bundle ID for the App ID. It is best when it’s a reverse-dns style string. So my suggestion, if www.example.com is your web-app URL, com.example.app can be your Bundle ID.

Add Capability

You’ll also want to scroll down through the list of capabilities and check the box next to Sign In with Apple and Enable it as Primary App ID.

Setting up Service ID

Now Go ahead and create a new identifier and choose Services IDs.

In the next step, you’ll define the name of the app that the user will see during the login flow, as well as define the identifier which becomes the OAuth client_id .
You can set it as app.example.com as com.example.app is used for Bundle ID.

PS. Make sure to also check the Sign In with Apple checkbox.

You’ll also need to click the Configure button next to Sign In with Apple in this step. This is where you’ll define the domain your app is running on, as well as define the redirect URLs used during the OAuth flow.

PS. Apple doesn’t allow localhost URLs in this step. You have to use a real domain here or use Ngrok.

Go ahead and click Save and then Continue and Register until this step is all confirmed.

Setting up Private Key

You actually have more steps to do generate Key . Either follow the guide by Aaron Parecki or hop on:
Back in the main Certificates, Identifiers & Profiles screen, choose Keys from the side navigation.

Click the blue plus icon to register a new key. Give your key a name, and check the Sign In with Apple checkbox.

Click the Configure button and select the primary App ID you created earlier.

Apple will generate a new private key for you and let you download it only once. Make sure you save this file because you won’t be able to get it back again later. Then, press Done.

Setting Up React.js:

Damn, long process right? Bare with me, now is the easier part. The first thing you need to do is add the apple script. We use scriptjs for that.

Init AppleID

SignIn AppleID

Next, create a button with onClick function window.AppleID.auth.signIn()>/>

It’ll open the Apple View, it’s different on Safari however, but I’ll be attaching the Screenshot of other browsers here:

Now, after continuing, it’ll forward a POST request 🤦‍♂️. We know to handle it inside React/Next is a task on its own.

Setting Up Node:

So, we define the route /apple/callback on the backend and redirect to /app route being handled in the frontend.

Handling JWT

We have the id_token and code inside body . If you want to validate the user using code , please follow the guide by Arjun Komath
cause we’ll only be using id_token .

You have two ways of getting the user. Since the id_token is just a jwt we can:

• Extract the JWT
• Validate the JWT

Extract JWT

Validate the JWT

• _getApplePublicKeys is just fetching the multiple keys from https://appleid.apple.com/auth/keys .
• Decode the id_token to extract the kid and extract the exact key which matches the kid of id_token .
• Build the RSA and verify the jwt .

Forwarding to Frontend

Then, you can forward the user details by sending the data as:

Now, define a route /app inside react.js and then, on useEffect or componentDidMount just use query-string to get the user .

PS. You can also set the cookie on the backend and parse it using react-cookie .

Setting Up React-Native:

It’s fairly simple on the react-native though with the introduction of react-native-apple-authentication package.

You can just follow the Initial-Setup Guide or hop on:

Add Sign-in capability

Taking into consideration that you already have Target setup on XCode with bundle id com.example.app , just add the Sign In with Apple capability inside:

PS. You need a valid team, however, once you set it you will see a screen similar to this:

Now, if you have not followed the guide from above you need to have your AppID setup in Identifiers . Follow the guide above for AppID only and come back here.

Note: Enable the APP ID as a primary if not already and click the Save button.

Now that you have everything set up, just add the package:

And then use the AppleButton where you can add custom-styles as well. On pressing the button, we call a function to extract the identityToken with scope of for email and name .

Now that we have the token, we send it to our node-backend . However, above we are handling for the condition of callback_url and POST Request . Here, we’ll use the same logic of getAppleUserId , so we’ll just send the token to /apple/login backend route as:

• getAppleUserId is defined above. Just have a look at it where we either extract or validate the jwt and extract the data.

Next, we forward the user back to react-native-client .

Conclusion

Setting it up is definitely not easy and requires patience. It took a lot of time for us as well and we intend to solve it for you. There might be some grammatical mistakes or logic issues here and there, do let me know if you find it.

Thanks for giving this a read. We will continue to keep you posted on the updates and cool stuff.

Источник

Implement “Sign in with Apple” on React Native iOS Chat App

Table of Contents

Creating a Stream Account

Setting Up the Project

Building the Server

Building the Client

Stream Chat SDKs

React Native Chat SDK

• over 1 year ago

«Social logins» are a very popular alternative to creating a login and password for a website or application that is new to a user. With «social login», a user makes use of an existing account, like Google or Facebook, to sign up for or log in to another application. This means users don’t have to remember yet another username and password, and can easily utilize data from the platform that they used to sign in within the new app; for example, many «new apps» can search the user’s contact list in the social app to suggest new connections within the «new app».

At Apple’s last World Wide Developer Conference (WWDC), they announced their own social login option called «Sign in with Apple». It might seem like they were just following a trend to offer more of the same (and that they were late to the game); however, Apple took the opportunity to take existing tech and improve upon it. Companies like Facebook, Microsoft, and Google have all been involved in data privacy concerns; Apple surpassed the social login capabilities of these other companies not just in the realm of privacy, but also in usability. A few of the advantages to Apple’s social login are:

• Bombproof User Privacy — Only limited data is provided to the app: email and name. And, if the user wishes, they can request for Apple to mask their email address. When this extra layer of security is enabled, Apple generates a random email address specifically for the app the user is logging in to; the generated email address they generate then gets routed back to your original email. The advantage here is that applications never get the email associated with your Apple ID.
• Ability to Integrate with iOS — Sign in once, and your login is available on all your devices.
• Lightning-Fast Connections — Apple’s social login process is the fastest social login out there, as all that is needed from the user is their Face ID or Touch ID.
• Elimination of Spam Users — App developers have the luxury of knowing users registering on their platform are actually legitimate users.

In this post, we’ll create a simple chat application to show you how to implement «Sign In with Apple» in your application by taking advantage of Stream Chat features. As always, you can find the full code repo on GitHub.

Prerequisites

To complete this tutorial, you’ll need the following logins, programs, and devices:

Creating a Stream Account

We’ll be using Stream to create our application, so you’ll need to create a free Stream account. To do this, head to the Stream Chat Homepage and click SIGNUP (or, if you’re already a Stream user, go ahead and log in). When you click to sign up for Stream, you’ll get a pop up where you can either enter your email and desired username and password OR use GitHub’s social login option:

Once you’ve created or signed in to your account, you’ll be taken to your dashboard, where you can find your API Keys:

Tuck your Key and Secret away somewhere safe; we’ll be using them in a bit to authenticate our app’s connection to Stream!

Now, let’s get to coding!

Setting Up the Project

The first step we’ll take is to set up the skeleton for our application by creating directories to house both the server and client, and then populating those with the general structure of a React Native application. We can create our directories using the following commands:

Then, we can use the commands below to jump into our newly-created applesignin directory and create a React Native application:

Building the Server

While Apple will handle the user authentication for us, we’ll still need to communicate with Stream in order to get a user token to send/receive messages. The first step we need to take is to sort out dependencies needed. That can be done by running:

The next step is to create a index.js file, where we will connect these dependencies, and a .env file, where we will keep all of the values we don’t want publicly available:

The config.json file will contain some credentials used to communicate with Apple. They are required as we will validate the authorization code the client app sends to the backend before connecting to StreamChat. In the config/config.json file. Paste the following:

Please note a few things.

• key_id is your application APP ID. It can be found in the image below:

• team_id is the 10 character code on the top left of the developer page next to your name. Refer to the screenshot below:

• key_id : This is the ID of the key you are going to download later on in this tutorial. When downloaded, you can find the ID as shown below:

redirect_uri should be left empty as this is an iOS application not the web.

The .env file is where the API key and secret that you grabbed from the Stream Chat dashboard will be stored. The index.js file will then read the values from the .env file and act accordingly. In the .env file, paste the following:

Remember to replace «your_API_KEY» and «your_API_SECRET» with the values you retrieved from your Stream Chat dashboard.

The next step is to paste the following code into the index.js file:

In the above code, we created a single authentication endpoint for the server. The endpoint, called /auth , takes a username and then adds the user to Stream Chat and creates a token , which is then sent back to the mobile app.

Once you’ve set all of this up, you can start the server by running:

Building the Client

The first step to setting up the mobile client is to update the required dependencies:

Configuring Xcode and the Apple Developer Portal

Before proceeding, you will need to update some details about the app in Xcode and your Apple Developer Portal, to configure the app for «Sign in with Apple».

Xcode

Open your project in Xcode by clicking Open another project. , and navigating to the client/ios/client.xcodeproj file:

Click » client » under the TARGETS header:

Click Signing & Capabilities to show the below noted view. Click + Capability and from the menu select Sign in with Apple which will appear at the bottom as highlighted:

You will need to sign in as a team if you have this error message.

If successful, your status should show no error message like below.

Apple Developer Console

Head over to Apple’s Developer Console. Click Account in the nav bar at the top. You will either have to sign in, or create an account. Your account dashboard will look much like the below. If you do not see Certificates, Identifiers & Profiles as an option in the left-hand sidebar, it means you have not yet enrolled in the Apple Developer Program, which is a prerequisite for Apple product development:

Click on Identifiers in the left-hand sidebar, then click on the project in the list:

Tick the checkbox for Sign in with Apple and click the Edit button to the right of it. Select Enable as a primary App ID and click Save button:

Now, to solidify these changes, click the Save button at the top of the screen:

To be able to connect these changes to our app, we’ll need a key. Click on Keys in the left-hand sidebar and create a new key:

Give your new key a name, tick the checkbox next to Sign In with Apple, and click Configure:

From the Configure Key page, select our new key as our Primary App ID:

Then, register your key, download it, and keep it secure:

Once the key has been downloaded, you will need to move it to the config folder. That can be done with:

/Downloads/key.p8 for example.

Initial setup is now complete!

Back to Coding!

In your newly created Login.js file, paste the following code:

Remember to update the values of «NGROK_URL» and «API_KEY». You can get a Ngrok url by running «ngrok http 5200»

Next, in the Chat.js file, paste the following:

As a final step, these newly created components need to be wired up in App.js ; in App.js paste the following:

To run the app, connect your iPhone to your Mac and run:

You’ll likely need to connect your iPhone to your Mac for the above to work, as «Sign in with Apple» might not work on a simulator.

Wrapping Up

Nice work! In this tutorial, you implemented the new «Sign in with Apple» feature to authenticate users in a Stream Chat application. This should have given you some insight as to how to implement this feature in your own production application. If you run into any questions or want to add more features to your app, Stream has some awesome docs to help you out!

Источник