Description

This article will show you a step by step procedure to implement Microsoft Office 365 Login using React Native. I assume that you are already comfortable with React Native and you have basic knowledge of it. So let's begin implementing Microsoft Office 365 Login using React Native.
Prerequisite
To create a React Native app follow the following steps,
  1. First step is to create a new React Native app. Following is the command for that,

    npx react-native init microsoftOffice365LoginReactNative
    cd microsoftOffice365LoginReactNative
  1. Then, run the app. I am running a project on my real device using the following command,

    react-native run-android

    So now we are having default app run on our device.
  1. Now, we will install a plugin to implement Microsoft office 365 login in React Native app. Following is the plugin installation command for that,

    npm i react-native-app-auth
  1. For step 5 we need to configure an app for Microsoft login which will provide us credentials that will be used in step 5 and 6 for Android and iOS setup. Below is the screenshot and link for that.
  1. Now we will add some configuration for ANDROID.
Note
for RN >= 0.57, you will get a warning about compile being obsolete. To get rid of this warning, use patch-package to replace compile with implementation as in this PR - we're not deploying this right now, because it would break the build for RN < 57.
To setup the Android project, you need to add redirect scheme manifest placeholder,
To capture the authorization redirect, add the following property to the defaultConfig in android/app/build.gradle,
  1. android {
  2. defaultConfig {
  3. manifestPlaceholders = [
  4. appAuthRedirectScheme: 'graph-tutorial://react-native-auth’ // CREATED IN STEP 4
  5. ]
  6. }
  7. }
The scheme is the beginning of your OAuth Redirect URL, up to the scheme separator (:) character. E.g. if your redirect uri is com.myapp://oauth, then the url scheme is com.myapp
  • You can also check iOS configuration from here for more detail.
Now we will add one button to authenticate users with Microsoft office 365 login in App.js file. Following is the full code of that.
  1. import React, { useState } from 'react';
  2. import {
  3. StyleSheet,
  4. View,
  5. Text,
  6. TouchableHighlight,
  7. } from 'react-native';
  9. import { authorize } from 'react-native-app-auth';
  11. const AuthConfig = {
  12. appId: "[APP ID CREATED IN STEP 4]",
  13. tenantId: "[ CREATED IN STEP 4 ]",
  14. appScopes: [
  15. 'openid',
  16. 'offline_access',
  17. 'profile',
  18. 'User.Read',
  19. ],
  20. };
  22. const config = {
  23. warmAndPrefetchChrome: true,
  24. clientId: AuthConfig.appId,
  25. redirectUrl: Platform.OS === 'ios' ? 'urn:ietf:wg:oauth:2.0:oob' : 'mlogin://react-native-auth',
  26. scopes: AuthConfig.appScopes,
  27. additionalParameters: { prompt: 'select_account' },
  28. serviceConfiguration: {
  29. authorizationEndpoint: 'https://login.microsoftonline.com/' + AuthConfig.tenantId + '/oauth2/v2.0/authorize',
  30. tokenEndpoint: 'https://login.microsoftonline.com/' + AuthConfig.tenantId + '/oauth2/v2.0/token',
  31. },
  32. };
  34. const App: () => React$Node = () => {
  35. const [result, setResult] = useState({});
  37. loginWithOffice365 = async () => {
  38. let tempResult = await authorize(config);
  39. console.log(tempResult);
  40. setResult(tempResult);
  41. };
  42. return (
  43. <>
  44. <View style={styles.container}>
  45. <TouchableHighlight
  46. style={[styles.buttonContainer, styles.loginButton]}
  47. onPress={() => loginWithOffice365()}>
  48. <Text style={styles.loginText}>Login with Office365</Text>
  49. </TouchableHighlight>
  50. <Text>{result.accessToken ? "Logged In" : "Error"}</Text>
  51. </View>
  52. </>
  53. );
  54. };
  56. const styles = StyleSheet.create({
  57. container: {
  58. flex: 1,
  59. justifyContent: 'center',
  60. alignItems: 'center',
  61. backgroundColor: '#DCDCDC',
  62. },
  63. buttonContainer: {
  64. height: 45,
  65. flexDirection: 'row',
  66. justifyContent: 'center',
  67. alignItems: 'center',
  68. marginBottom: 20,
  69. width: 250,
  70. borderRadius: 30,
  71. },
  72. loginButton: {
  73. backgroundColor: '#3659b8',
  74. },
  75. loginText: {
  76. color: 'white',
  77. },
  78. });
  80. export default App;

Conclusion

In this article we have learned how to integrate Microsoft Office365 Login using React Native.