Microsoft Login Integration in React Native

Overview

This document provides a step-by-step guide to implementing Microsoft Login in a React Native application. It includes the necessary code, required plugins, and native configuration changes.

Prerequisites

Ensure you have a React Native project set up before proceeding with the integration.

Installation

Run the following commands to install the required dependencies:

npm i react-native-azure-auth  
npm i @react-native-async-storage/async-storage  
npm i @sasibalaji/react-native-custom-social-login-microsoft  

Native Configuration Changes

Android Configuration

Modify android/app/build.gradle:
Add the following dependency inside the dependencies section:

implementation 'androidx.versionedparcelable:versionedparcelable:1.1.1'  

Modify AndroidManifest.xml
Inside the <activity> section, add the following intent-filter:

<intent-filter>  
   <action android:name="android.intent.action.VIEW" />  
   <category android:name="android.intent.category.DEFAULT" />  
   <category android:name="android.intent.category.BROWSABLE" />  
   <data android:scheme="com.sociallogin" />  
</intent-filter>  

Replace com.sociallogin with your actual app scheme.

Modify gradle.properties
Add the following line:

android.enableJetifier=true  

Microsoft Login Code

import React from 'react';  
import { View } from 'react-native';  
import MicrosoftLogin from '@sasibalaji/react-native-custom-social-login-microsoft';  

const App = () => {  
  const handleSuccess = ({ user, accessToken }) => {  
    console.log('Microsoft Login Success:', { user, accessToken });  
  };  

  const handleError = (error) => {  
    console.error('Microsoft Login Error:', error);  
  };  

  return (  
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>  
      <MicrosoftLogin  
        clientId="YOUR-CLIENT-ID"  
        redirectUri="YOUR-REDIRECT-URI"  
        tenant="YOUR-TENANT-ID" // Use your tenant ID  
        scopes={['openid', 'profile', 'User.Read', 'Mail.Read']}  
        onSuccess={handleSuccess}  
        onError={handleError}  
      />  
    </View>  
  );  
};  

export default App;  

Conclusion

Following the steps above, you can successfully integrate Microsoft Login into your React Native application. Ensure you replace placeholder values like clientId, redirectUri, and app scheme with your actual credentials.