@ist-group/react-native-oidc

REACT-NATIVE-OIDC

A library for OIDC communication and session management in react native.

NOTE that this library does not validate the tokens. Though it uses a nonce to protect against CSRF attacks and implements PKCE to protect against authorization code interception attack.

Usage

Initialization

import { SessionManager } from "react-native-oidc";

let sessionManager = new SessionManager({
    clientId: "APP_ID",
    clientSecret: "SECRET",
    authority: 'https://my-authority',
    redirectUri: "my-scheme:///",
    scope: "openid"
});

// Showing a splash screen/loading screen while checking if we have a valid session
showSplashScreen();

let hasActiveSession = await sessionManager.hasActiveSession();
if (hasActiveSession) {
    showUserHomeScreen();
} else {
    showLoginScreen();
}

Login

Login with username and password

Remarks:

• Login with username and password requires resource owner grant.

try {
    await sessionManager.loginUsernamePassword(username, password);
    showUserHomeScreen();
} catch (e) {
    alert('Invalid username or password');
}

Login at authority via browser

try {
    await sessionManager.loginBrowser();
    showUserHomeScreen();
} catch (e) {
    alert('Something went wrong')
}

API calls

try {
    var accessToken = await sessionManager.getAccessToken();
    return await fetch(accessToken, data);
} catch (error) {
    if (error instanceof InvalidSesionError) {
        showLoginScreen('You have been logged out');
    }

    throw error;
}

Developing

Since the react-native packer doesn't work well with symbolic links the yarn link command cannot be used with this library. Instead use the node cpx cli to watch and copy files to the target project when developing:

1. npm install cpx --global
2. yarn start
3. cpx "./dist/**/." ../my-app/node_modules/@ist-group/react-native-oidc/dist --watch --verbose