@cryptr/cryptr-react-native

@cryptr/cryptr-react-native

React Native SDK for Cryptr Authentication through SSO

Summary

• @cryptr/cryptr-react-native
  • Summary
  • Expo integration
  • Prerequisites
    • Android
    • iOS
  • Installation
    • 1 - Create Mobile Application on Cryptr
    • 2 - Dependency
    • 3 - Android
  • Usage
    • Basis
      • iOS Alert dialog on SSO log in
    • Hooks
      • isAuthenticated
      • user
      • accessToken
      • idToken
      • signInWithDomain
      • signInWithEmail
      • refreshTokens
      • logOut
      • error
      • isLoading
    • Components

Expo integration

:warning: this is not compatible with Expo Go (neither link) and requires a run (expo run)

Prerequisites

Android

Support with minSdkVersion=23

iOS

Full support with iOS>=13.0

Installation

1 - Create Mobile Application on Cryptr

Through your API or on your dashboard create a react-native application with the following attributes:

Attribute Name	Value
Name	Desired name for your App
Application type	mobile
Allowed Redirect URI	cryptr://your-tenant

⚠️ Choose wisely your domain to avoid conflicts with other apps.

When the application is registered, the configuration will be displayed, keep it for implementation.

2 - Dependency

# Yarn
yarn add @cryptr/cryptr-react-native

# NPM
npm install @cryptr/cryptr-react-native

3 - Android

Check your minSdkVersion

In android/build.gradle check that the version is 23 or greater

//android/build.gradle
minSdkVersion = 23

Update your manifestPlaceholders

In android/app/build.gradle setup as below. If manifestPlaceholders is not present add it with proper values.

android {
  //...
  defaultConfig {
    //...
    manifestPlaceholders = [cryptrDomain: "your-tenant", cryptrScheme: "cryptr"]
  }
}

The cryptrDomain should have the same value in the allowed redirect URI for this app on Cryptr.

You are now good to go.

Usage

Basis

Cryptr implementation is based on React Context and Provider. At the top level of your React Native App set the configuration you got on the first step, like this one:

const config: CryptrConfig = {
  tenant_domain: 'YOUR_TENANT',
  client_id: 'APPLICATION_ID',
  audience: 'cryptr://YOUR_TENANT',
  default_redirect_uri: 'cryptr://YOUR_TENANT',
  region: Region.EU,
  cryptr_base_url: 'YOUR_SERVER_URL',
  dedicated_server: true, // if you have a dedicated server on cryptr
};

Then you can use it into <CryptrProvider {...config}>

Example: Inside this Provider, you can handle Cryptr Authentication using our Hooks and/or components.

iOS Alert dialog on SSO log in

If you want to avoid the display of the below Alert dialog on iOS. you can add no_popup_no_cookie: true to your config.

:warning: With this configuration, even the default browser has registered credentials, end-user will have to type them each type.

Hooks

access to our hooks like this

import { useCryptr } from `@cryptr/cryptr-react-native`

// ...

const { /* Any required hook */ } = useCryptr()

isAuthenticated

Hook to know if a Cryptr session is active

The return type is a boolean

const { isAuthenticated } = useCryptr()

if(isAuthenticated) { /**/ }

user

Hook to retrieve the User information (extracted from current oAuth Cryptr active session ID Token)

The return type is a key/value pair Object.

const { user } = useCryptr()

// ...
user()

accessToken

Hook to retrieve the current accessToken value

The return type is a ** nullable string**.

const { accessToken } = useCryptr()

//..
{accessToken && <Text>{accessToken}</Text>}

idToken

Hook to retrieve the current idToken value

The return type is a string.

const { idToken } = useCryptr()

//...
{idToken && <Text>{idToken}</Text>}

--

Actions

signInWithDomain

Hook action to sign in the user using his organization's domain.

const { signInWithDomain } = useCryptr();

// Signature
signInWithDomain(domain?: string, successCallback? (data: any) => any, errorCallback?: (data: any) => any)

// Sign in for domain `company-dot-io`
signInWithDomain('company-dot-io')

💡 If you do not provide value for domain user will be asked to input his email address and regarding to your organizations configuration he will be redirected to proper authentication process.

signInWithEmail

Hook action to sign in the user using his business email. Requires email value.

const { signInWithEmail } = useCryptr();

// Signature
signInWithEmail(email: string, successCallback? (data: any) => any, errorCallback?: (data: any) => any)

// Sign in for email `[e-mail]`
signInWithEmail('[e-mail]')

refreshTokens

Hook action to refresh tokens to new ones.

const { refreshTokens } = useCryptr()

// [...]
refreshTokens(callback?: (data: any) => any)

logOut

Hook action to log out the user.

const { logOut } = useCryptr()

// [...]

logOut(successCallback?: (data: any) => any, errorCallback?: (data: any) => any)

--

error

Hook to know if a Cryptr error occured

The return type is a String

const { error } = useCryptr()

isLoading

Hook to inform you that a Cryptr process is in progress.

The return type is a boolean

const { isLoading } = useCryptr()

Components

This SDK also includes Components to simplify your integration.

• CryptrGatewayButton to log in either with domain or email (hides when session is already active [autoHide={false} to disable])
• LogOutButton to logout user (hides when no session is active [autoHide={false} to disable])
• RefreshButton to get new tokens (hides when session is already active [autoHide={false} to disable])