TypeScript icon, indicating that this package has built-in type declarations

0.3.2 • Public • Published


React Native SDK for Cryptr Authentication through SSO

Current version: 0.3.1


Expo integration

⚠️ this is straightforward compatible with Expo

Here is an example of a plugin to be compatible with Expo for Android manifest configuration

Cryptr Expo plugin for Android

const { withAppBuildGradle } = require("@expo/config-plugins");module.exports = function withAndroidStrategiesPlugin(config) {
  return withAppBuildGradle(config, (config) => {
    config.modResults.contents = config.modResults.contents.replace(
      "targetSdkVersion rootProject.ext.targetSdkVersion",
      'targetSdkVersion rootProject.ext.targetSdkVersion\n        manifestPlaceholders = [cryptrDomain: YOUR-DOMAIN, cryptrScheme: "cryptr"]'
    );return config;



Support with minSdkVersion=23


Full support with iOS>=13.0


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 install @cryptr/cryptr-react-native

3 - Android

Check your minSdkVersion

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

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.



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. Capture d’écran 2022-06-14 à 19 05 54

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


access to our hooks like this

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

// ...

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


Hook to know if a Cryptr session is active

The return type is a boolean

const { isAuthenticated } = useCryptr()

if(isAuthenticated) { /**/ }


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()

// ...


Hook to retrieve the current accessToken value

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

const { accessToken } = useCryptr()

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


Hook to retrieve the current idToken value

The return type is a string.

const { idToken } = useCryptr()

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




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`

💡 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.


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 `john@company.io`


Hook action to refresh tokens to new ones.

const { refreshTokens } = useCryptr()

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


Hook action to log out the user.

const { logOut } = useCryptr()

// [...]

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



Hook to know if a Cryptr error occured

The return type is a String

const { error } = useCryptr()


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

The return type is a boolean

const { isLoading } = useCryptr()


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])

Package Sidebar


npm i @cryptr/cryptr-react-native

Weekly Downloads






Unpacked Size

472 kB

Total Files


Last publish


  • jeremiecryptr
  • thibaud-cryptr