Nourishing Plushie Monster

    react-native-azure-ad-single-tenant

    1.0.5 • Public • Published

    React-native-azure-ad-single-tenant

    Trying to access a Microsoft Accounts is kind of bizarre. Microsoft previously separated their user accounts into two different domains, one for their cloud platform – Microsoft Azure – and another for general users who are using their services like Hotmail, One Drive or Xbox.

    This meant developers had to use different authentication endpoints in order to authenticate users from different services.

    😱 😱 😱 😱

    Thankfully they recently converged their disparate authentication service into a single service called “v2.0 endpoint” which allows you to use OAuth authentication for whichever Microsoft service account you have.

    Authenticating a user via the v2 endpoint will give us access to a custom bearer token, this token allows us to consume REST APIs from the Microsoft Graph (a single end point into all Microsoft services) and allows your app to request for simple user data, for example first name, last name, email, and get other information like email messages, contacts and notes associated with their accounts.

    This module is developed to help developers to integrated Microsoft V2 endpoint into their React-native app in a painless way.


    Table of content

    Installation

    Install package from npm

    $ npm install -s react-native-azure-ad-single-tenant

    Usage

    First, import the component

    import {AzureInstance, AzureLoginView} from 'react-native-azure-ad-single-tenant'

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

    const CREDENTIAILS = {
        client_id: 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        client_secret: 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        tenant_id: 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        scope: 'User.ReadBasic.All Mail.Read offline_access'
    };
    
    const Instance = new AzureInstance(CREDENTIAILS);

    After that, create an AzureLoginView where you want the login WebView to be rendered and pass along with azureInstance that we have create from the last step.

    render( ) {
        return (
            <AzureLoginView
                azureInstance={this.azureInstance}
                loadingMessage="Requesting access token"
                onSuccess={this._onLoginSuccess}
            />
        );
    }

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

    import React from 'react';
    import {AppRegistry, View} from 'react-native';
    import {AzureInstance, AzureLoginView} from './azure';
    
    // CONSTANT
    const CREDENTIAILS = {
        client_id: 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        client_secret: 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        tenant_id: 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        scope: 'User.ReadBasic.All Mail.Read offline_access'
    };
    
    export default class azureAuth extends React.Component {
    	constructor(props){
    		super(props);
    		
    		this.azureInstance = new AzureInstance(CREDENTIAILS);
    		this._onLoginSuccess = this._onLoginSuccess.bind(this);
    	}
    	
    	_onLoginSuccess(){
    		this.azureInstance.getUserInfo().then(result => {
    			console.log(result);
    		}).catch(err => {
    			console.log(err);
    		})
    	}
    
        render() {
            return (
                <AzureLoginView
                	azureInstance={this.azureInstance}
                	loadingMessage="Requesting access token"
                	onSuccess={this._onLoginSuccess}
                />
            );
        }
    }
    
    AppRegistry.registerComponent('azureAuth', () => azureAuth);

    Install

    npm i react-native-azure-ad-single-tenant

    DownloadsWeekly Downloads

    3

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    16.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • foxgre03