React-native-azure-ad-auth NPM

React-Native-Azure-Ad-Auth

A React Native module for Azure AD authentication endpoint. This module implements Azure AD authentication using pure React-Native using typescript.

This is an inspired copy of shedaltd/react-native-azure-ad-2 with some issues resolved and a logout feature.

This module should help developers integrate Microsoft V2 endpoint into their React-native app in a simple way.

Components:
- AzureAdInstance
- AzureAdView
- AuthAdAuth

Installation

Install package from npm

$ npm install react-native-azure-ad-auth

Usage

First, import the component

import { AzureAdInstance, AzureAdView } from 'react-native-azure-ad-auth';

Then create an AzureAdInstance by using Microsoft application credentials that was registered. Also, adding application scope in order to ask users to consent when they login. For more information about scope see Microsoft blog.

var credentials = {
    authority: 'https://login.microsoftonline.us/YOUR_TENANT_ID',
    client_id: 'YOUR_CLIENT_ID',
    client_secret: 'YOUR_CLIENT_SECRET',
    redirect_uri: 'YOUR_REDIRECT_URI',
    scope: 'openid user.read offline_access'
};

const azureAdInstance: AzureAdInstance; = new AzureAdInstance(credentials);

For accessing scopes, see permissions and consent for more info.

After that, create an AzureAdView where the login WebView will be rendered and pass the azureAdInstance that was created from the last step.

render() {
    return (
        <AzureAdView
            azureAdInstance={this.azureAdInstance}
            loadingMessage="Requesting access token"
            onSuccess={this.onLoginSuccess}
            onCancel={this.onLoginCancel}
        />
    );
}

When combine all parts together, it will look like this.

import React, { Component } from 'react';
import { View } from 'react-native';
import { AzureAdInstance, AzureAdView } from 'react-native-azure-ad-auth';

// Constant credentials from Azure AD registration
var credentials = {
    authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
    client_id: 'YOUR_CLIENT_ID',
    client_secret: 'YOUR_CLIENT_SECRET',
    redirect_uri: 'YOUR_REDIRECT_URI',
    scope: 'openid user.read offline_access'
};

export default class App extends React.Component {

    azureAdInstance: AzureAdInstance;

    constructor(props){
        super(props);        
        this.azureInstance = new AzureInstance(credentials);
    }
    
    _onLoginSuccess(){
        this.azureInstance.getUserInfo().then(result => {
            console.log(result);
        }).catch(err => {
            console.log(err);
        })
    }
    
    _onLoginCancel(){
        // Show cancel message
    }

    render() {
        return (
            <AzureAdView
                azureAdInstance={this.azureAdInstance}
                loadingMessage="Requesting access token"
                onSuccess={this.onLoginSuccess}
                onCancel={this.onLoginCancel}
            />
        );
    }
}

AppRegistry.registerComponent('App', () => App);