Guide

Setup OIDC Authentication Provider

Keycloack

If you are planning to use OIDC authentication with Keycloak, you have to setup a Realm and a OAuth2 Client. If you do not already have an instance of Keycloak, you can launch a local standalone instance on your development workstation. First, download a Keycloak Standalone server at https://www.keycloak.org/downloads.html:

1. Unzip and cd keycloak-{version}

2. Launch Keycloak standalone

$ ./bin/standalone.sh -b 0.0.0.0

3. Open http://localhost:8080/ in the browser login with default admin/admin account and set up Keycloak realm and Client. Here is an example of client configuration:

Setup Keycloak instance

Keycloak client general setting example

Keycloak client mappers example (add primaryPhone and mobilePhone user Attribute)

OKTA

Please follow the below steps to setup authentication using Okta

1. First create your Okta developer account here

2. Follow this steps in this videos to setup authentication:

Okta: setup authorization server and application

Okta: create user and first login to the app

Google

To use Google Sign In, you will need to create a project on the Google Developer Console and create an OAuth 2.0 client ID.

1. Get an app set up on the Google Developer Console

2. Go to the Credentials Page Create an app for your project if you haven't already.

3. Once that's done, click "Create Credentials" and then "OAuth client ID." You will be prompted to set the product name on the consent screen, go ahead and do that.

Here is a setup exemple:

OAuth consent screen setup

Auth0

To use Auth0 Sign In, please follow this steps:

• Create un account at https://auth0.com/ or login to an existing one.

• Go to "Applications" Menu and click on CREATE APPLICATION button:

Click on CREATE APPLICATION button

• Enter an App name and selection Native App:

• Go to Setting Tab:

• Enter the application redirect url on Allowed Callback URLs field:

• Copy Domain and Client ID and update AUTH0_DOMAIN and 'AUTH0_CLIENT_IDvariables in .env file with:

  • AUTH0_DOMAIN= [Copied Domain]/authorize

  • AUTH0_CLIENT_ID=[Client ID]

After updating .env file, you have trigger code rebuild by modifying this file /screens/SocialLogin/behaviors.js. Just add a new line or any change and save it then relaunch the app.

Connect to your Expo account

When using Expo services like AuthSession, you should use expo start and login to your Expo.io account becausereact-native-scripts start uses a logged-out, anonymous developer account that's why you will have a warning message You are not currently signed in you Expo on your development machine.

Available scripts

This app include all necessary scripts to launch the commons tasks:

  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "jest && eslint .",
    "test:watch": "jest --watch",
    "test:updateSnapshot": "jest --updateSnapshot",
    "test:coverage": "jest --coverage",
    "test:coverage:watch": "jest --coverage --watch",
    "lint:fix": "eslint --fix src",
    "precommit": "yarn test",
    "postinstall": "rndebugger-open",
    "server": "json-server --watch api/db.json --routes api/apiRoutes.json --port 3004"
  }

Testing

Launching tests

Launch this command to execute tests:

$ yarn test
or
$ npm run test

Tests are also launched before each push using a Git hook

To generate test coverage reports, use the command:

$ yarn test:coverage
or
$ npm run test:coverage

To update Jest Snapshots , use the command:

$ yarn test:updateSnapshot
or
$ npm run test:updateSnapshot