Get Started with Auth0 Authentication in React Native iOS Apps
Tags: ios, mobile, programming
Published: 2022-05-31 20:31:48

### If you build iOS apps with React Native, this tutorial will show you how quickly you can use Auth0 to add authentication to your apps.

### <br>

If you build iOS apps with React Native, this tutorial will show you how quickly you can use Auth0 to add authentication to your apps. You’ll make an app that lets users log in with an app-specific username/password combination or a Google account.

This tutorial contains the steps specific to creating _iOS_ apps written with React Native. It has a companion article, [_Get Started with Auth0 Authentication in React Native Android Apps_](https://auth0.com/blog/get-started-auth0-authentication-react-native-android). The app code is the same in both tutorials, but the Android and iOS versions require different configuration steps.

> Look for the ⚛️ emoji if you’d like to skim through the content while focusing on the build and execution steps. Harness the power of control-F/command-F to build the app in this tutorial quickly!

## What You’ll Build

This tutorial will walk you through the steps to build the app shown below:

![The app’s four screens: “Login”, “Universal Login”, “Loading”, and “Account”.](https://images.ctfassets.net/23aumh6u8s0i/9Wo3h1GfCgplcrzLZsvj0/baf94991835a96055eea949dc3e7d73e/ios_screens.png)

The app will have four screens:

1. The _**Login**_ screen, which the user will see when the app launches. It has a **Login With Auth0** button that takes the user to the _Universal Login_ screen when pressed.
2. The _**Universal Login**_ screen, where the user authenticates themself — that is, where they enter their user name and password or perform some other action to prove their identity. You don’t have to code this screen; a call to the Auth0 API brings it up. After logging in, the app takes the user to the _Loading_ screen. 
3. The _**Loading**_ screen displays an activity indicator while the app determines the user’s login status. In many cases, the user won’t even see this screen. 
4. The _**Account**_ screen, where the user goes if they log in successfully. It displays a picture of the user and the user’s name and a **Logout** button that takes them to the _Login_ screen when pressed.

Let’s take a closer look at the [Universal Login](https://auth0.com/docs/authenticate/login/auth0-universal-login) screen shown below:

![Auth0’s default Universal Login screen.](https://images.ctfassets.net/23aumh6u8s0i/2uD9NpCxaKLJCvq0xNyKro/2241cfe17003c3534800a97bca53a7e7/basic_universal_login.png)

A call to the Auth0 API brings up the Universal Login screen, which is a web page that, in native mobile apps, is contained within a web view. The screenshot above shows the basic form of the Universal Login page, which presents the user with fields for their email address and password, and a button that the user can click to submit their credentials. It also has links that allow the user to sign up for an account and get a new password in the event that they forgot theirs.

You can add ways for a user to log in without doing any coding. For example, you need only a few clicks to add the ability for users to [log in using a social account](https://auth0.com/learn/social-login/). You’d expect some of these, such as Facebook, Apple, and Microsoft, while others might surprise you, such as Spotify, Twitch, RenRen, or even an [Ethereum wallet](https://auth0.com/blog/sign-in-with-ethereum-siwe-now-available-on-auth0/). In this article’s exercise, you’ll do this by enabling users to log in with their Google account (note the **Continue with Google** button):

![The Universal Login screen, with a “Continue with Google” button.](https://images.ctfassets.net/23aumh6u8s0i/7Ayxey4jGTD4W8AWszvahV/860261b6f593d1339c68004cb604bbf6/universal_login.png)

You can also customize the appearance of the Universal Login screen in the Auth0 dashboard to display a specific logo and use the colors of your choice. If you’d like to find out more, see the [_Customize New Universal Login Pages_](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates) page in our documentation.

## Prerequisites

To follow this tutorial, you’ll need the following:

* **An Auth0 account.** The app featured in this tutorial uses Auth0 to provide login and logout functionality. As its developer, you’ll need an Auth0 account. You can <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free account</a>, which lets you add authentication to 10 applications and supports 7000 user accounts. This should be enough for evaluating the platform, prototyping, development, and testing.
* **The [React Native](https://reactnative.dev/) CLI (Command-Line Interface) development environment.** React Native’s [_Setting up the development environment_ page](https://reactnative.dev/docs/environment-setup) walks you through the process of installing the React Native CLI environment on your machine. Note that this tutorial uses the _React Native_ CLI, not the Expo CLI.
* **Xcode.** React Native requires [Xcode](https://developer.apple.com/xcode/) and the [Xcode Command Line Tools](https://mac.install.guide/commandlinetools/index.html) to build apps for iOS. Xcode runs only on macOS.

You’ll need to be familiar with JavaScript, and it would be helpful if you had some familiarity with [React](https://reactjs.org/), [React Native](https://reactnative.dev/), and [React Hooks](https://reactjs.org/docs/hooks-intro.html).


[Read more...](https://auth0.com/blog/get-started-auth0-authentication-react-native-ios/?utm_source=content_synd&utm_medium=sc&utm_campaign=ios)