react-native-msal2 1.0.2 → 1.0.4

package/app/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "Msal2App",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "lint": "eslint .",
+    "start": "react-native start",
+    "test": "jest"
+  },
+  "dependencies": {
+    "react": "18.2.0",
+    "react-native": "0.73.6",
+    "react-native-msal2": "file:react-native-msal2-1.0.0.tgz"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
+    "@react-native/babel-preset": "0.73.21",
+    "@react-native/eslint-config": "0.73.2",
+    "@react-native/metro-config": "0.73.5",
+    "@react-native/typescript-config": "0.73.1",
+    "@types/react": "^18.2.6",
+    "@types/react-test-renderer": "^18.0.0",
+    "babel-jest": "^29.6.3",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react-test-renderer": "18.2.0",
+    "typescript": "5.0.4"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/app/src/App.tsx

@@ -0,0 +1,150 @@
+/**
+ * Example for a Azure B2C application using a B2CClient helper class
+ */
+
+import React from 'react';
+import {
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  View,
+  TouchableOpacity,
+} from 'react-native';
+import type {MSALResult, MSALWebviewParams} from 'react-native-msal2';
+
+import {B2CClient} from './b2cClient';
+import {b2cConfig, b2cScopes as scopes} from './msalConfig';
+
+const b2cClient = new B2CClient(b2cConfig);
+
+export default function App() {
+  const [authResult, setAuthResult] = React.useState<MSALResult | null>(null);
+  const [iosEphemeralSession, setIosEphemeralSession] = React.useState(false);
+  const webviewParameters: MSALWebviewParams = {
+    ios_prefersEphemeralWebBrowserSession: iosEphemeralSession,
+  };
+
+  React.useEffect(() => {
+    async function init() {
+      try {
+        await b2cClient.init();
+        const isSignedIn = await b2cClient.isSignedIn();
+        if (isSignedIn) {
+          setAuthResult(await b2cClient.acquireTokenSilent({scopes}));
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    init();
+  }, []);
+
+  const handleSignInPress = async () => {
+    try {
+      const res = await b2cClient.signIn({scopes, webviewParameters});
+      setAuthResult(res);
+    } catch (error) {
+      console.warn(error);
+    }
+  };
+
+  const handleAcquireTokenPress = async () => {
+    try {
+      const res = await b2cClient.acquireTokenSilent({
+        scopes,
+        forceRefresh: true,
+      });
+      setAuthResult(res);
+    } catch (error) {
+      console.warn(error);
+    }
+  };
+
+  const handleSignoutPress = async () => {
+    try {
+      await b2cClient.signOut();
+      setAuthResult(null);
+    } catch (error) {
+      console.warn(error);
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.buttonContainer}>
+        {authResult ? (
+          <>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={handleAcquireTokenPress}>
+              <Text>Acquire Token (Silent)</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.button}
+              onPress={handleSignoutPress}>
+              <Text>Sign Out</Text>
+            </TouchableOpacity>
+          </>
+        ) : (
+          <TouchableOpacity style={styles.button} onPress={handleSignInPress}>
+            <Text>Sign In</Text>
+          </TouchableOpacity>
+        )}
+
+        {Platform.OS === 'ios' && (
+          <TouchableOpacity
+            style={[styles.button, styles.switchButton]}
+            onPress={() => setIosEphemeralSession(!iosEphemeralSession)}>
+            <Text>Prefer ephemeral browser session (iOS only)</Text>
+            <Switch
+              value={iosEphemeralSession}
+              onValueChange={setIosEphemeralSession}
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+      <ScrollView style={styles.scrollView}>
+        <Text>{JSON.stringify(authResult, null, 2)}</Text>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: '1%',
+    backgroundColor: 'white',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingBottom: '1%',
+    margin: '-0.5%',
+  },
+  button: {
+    backgroundColor: 'aliceblue',
+    borderWidth: 1,
+    margin: '0.5%',
+    padding: 8,
+    width: '49%',
+    alignItems: 'center',
+  },
+  disabledButton: {
+    backgroundColor: '#ddd',
+  },
+  switchButton: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 4,
+    margin: '0.5%',
+    width: '99%',
+  },
+  scrollView: {
+    borderWidth: 1,
+    padding: 1,
+  },
+});

package/app/src/b2cClient.ts

@@ -0,0 +1,199 @@
+import {Platform} from 'react-native';
+import PublicClientApplication from 'react-native-msal2';
+import type {
+  MSALAccount,
+  MSALConfiguration,
+  MSALInteractiveParams,
+  MSALResult,
+  MSALSignoutParams,
+  MSALSilentParams,
+  MSALWebviewParams,
+} from 'react-native-msal2';
+
+export interface B2CPolicies {
+  signInSignUp: string;
+  passwordReset?: string;
+}
+
+export type B2CConfiguration = Omit<MSALConfiguration, 'auth'> & {
+  auth: {
+    clientId: string;
+    authorityBase: string;
+    policies: B2CPolicies;
+    redirectUri?: string;
+  };
+};
+export type B2CSignInParams = Omit<MSALInteractiveParams, 'authority'>;
+export type B2CSilentParams = Pick<MSALSilentParams, 'scopes' | 'forceRefresh'>;
+export type B2CSignOutParams = Pick<
+  MSALSignoutParams,
+  'signoutFromBrowser' | 'webviewParameters'
+>;
+
+export class B2CClient {
+  private static readonly B2C_PASSWORD_CHANGE = 'AADB2C90118';
+  private static readonly B2C_EXPIRED_GRANT = 'AADB2C90080';
+  private readonly policyUrls: B2CPolicies;
+  private pca: PublicClientApplication;
+
+  /** Construct a B2CClient object
+   * @param b2cConfig The configuration object for the B2CClient
+   */
+  constructor(b2cConfig: B2CConfiguration) {
+    const {authorityBase, policies, ...restOfAuthConfig} = b2cConfig.auth;
+    this.policyUrls = makePolicyUrls(authorityBase, policies);
+
+    // Set the sign in sign up policy as the default authority for the PublicClientApplication (PCA).
+    const authority = this.policyUrls.signInSignUp;
+
+    // We need to provide all authorities we'll be using up front.
+    // The default authority should be included in this list.
+    const knownAuthorities = Object.values(this.policyUrls);
+
+    this.pca = new PublicClientApplication({
+      ...b2cConfig,
+      auth: {authority, knownAuthorities, ...restOfAuthConfig},
+    });
+  }
+
+  public async init() {
+    await this.pca.init();
+    return this;
+  }
+
+  /** Initiates an interactive sign-in. If the user clicks "Forgot Password", and a reset password policy
+   *  was provided to the client, it will initiate the password reset flow
+   */
+  public async signIn(params: B2CSignInParams): Promise<MSALResult> {
+    const isSignedIn = await this.isSignedIn();
+    if (isSignedIn) {
+      throw Error('A user is already signed in');
+    }
+
+    try {
+      // If we don't provide an authority, the PCA will use the one we passed to it when we created it
+      // (the sign in sign up policy)
+      const result = await this.pca.acquireToken(params);
+      if (!result) {
+        throw new Error('Could not sign in: Result was undefined.');
+      }
+      return result;
+    } catch (error: unknown) {
+      if (
+        error instanceof Error &&
+        error.message.includes(B2CClient.B2C_PASSWORD_CHANGE) &&
+        this.policyUrls.passwordReset
+      ) {
+        return await this.resetPassword(params);
+      } else {
+        throw error;
+      }
+    }
+  }
+
+  /** Gets a token silently. Will only work if the user is already signed in */
+  public async acquireTokenSilent(params: B2CSilentParams) {
+    const account = await this.getAccountForPolicy(
+      this.policyUrls.signInSignUp,
+    );
+    if (account) {
+      // We provide the account that we got when we signed in, with the matching sign in sign up authority
+      // Which again, we set as the default authority so we don't need to provide it explicitly.
+      try {
+        const result = await this.pca.acquireTokenSilent({...params, account});
+        if (!result) {
+          throw new Error(
+            'Could not acquire token silently: Result was undefined.',
+          );
+        }
+        return result;
+      } catch (error: unknown) {
+        if (
+          error instanceof Error &&
+          error.message.includes(B2CClient.B2C_EXPIRED_GRANT)
+        ) {
+          await this.pca.signOut({...params, account});
+          return await this.signIn(params);
+        } else {
+          throw error;
+        }
+      }
+    } else {
+      throw Error('Could not find existing account for sign in sign up policy');
+    }
+  }
+
+  /** Returns true if a user is signed in, false if not */
+  public async isSignedIn() {
+    const signInAccount = await this.getAccountForPolicy(
+      this.policyUrls.signInSignUp,
+    );
+    return signInAccount !== undefined;
+  }
+
+  /** Removes all accounts from the device for this app. User will have to sign in again to get a token */
+  public async signOut(params?: B2CSignOutParams) {
+    const accounts = await this.pca.getAccounts();
+    const signOutPromises = accounts.map(account =>
+      this.pca.signOut({...params, account}),
+    );
+    await Promise.all(signOutPromises);
+    return true;
+  }
+
+  private async resetPassword(params: B2CSignInParams) {
+    const {webviewParameters: wvp, ...rest} = params;
+    const webviewParameters: MSALWebviewParams = {
+      ...wvp,
+      // We use an ephemeral session because if we're resetting a password it means the user
+      // is not using an identity provider, so we don't need a logged-in browser session
+      ios_prefersEphemeralWebBrowserSession: true,
+    };
+    if (this.policyUrls.passwordReset) {
+      // Because there is no prompt before starting an iOS ephemeral session, it will be quick to
+      // open and begin before the other one has ended, causing an error saying that only one
+      // interactive session is allowed at a time. So we have to slow it down a little
+      if (Platform.OS === 'ios') {
+        await delay(1000);
+      }
+      // Use the password reset policy in the interactive `acquireToken` call
+      const authority = this.policyUrls.passwordReset;
+      await this.pca.acquireToken({...rest, webviewParameters, authority});
+      // Sign in again after resetting the password
+      return await this.signIn(params);
+    } else {
+      throw Error('B2CClient missing password reset policy');
+    }
+  }
+
+  private async getAccountForPolicy(
+    policyUrl: string,
+  ): Promise<MSALAccount | undefined> {
+    const policy = policyUrl.split('/').pop();
+    const accounts = await this.pca.getAccounts();
+    return accounts.find(account =>
+      account.identifier.includes(policy!.toLowerCase()),
+    );
+  }
+}
+
+function makeAuthority(authorityBase: string, policyName: string) {
+  return `${authorityBase}/${policyName}`;
+}
+
+function makePolicyUrls(
+  authorityBase: string,
+  policyNames: B2CPolicies,
+): B2CPolicies {
+  return Object.entries(policyNames).reduce(
+    (prev, [key, policyName]) => ({
+      ...prev,
+      [key]: makeAuthority(authorityBase, policyName),
+    }),
+    {} as B2CPolicies,
+  );
+}
+
+async function delay(ms: number) {
+  return await new Promise<void>(resolve => setTimeout(resolve, ms));
+}

package/app/src/msalConfig.ts

@@ -0,0 +1,20 @@
+import type {B2CConfiguration} from './b2cClient';
+
+export const b2cConfig: B2CConfiguration = {
+  auth: {
+    clientId: 'fc8ecae3-0883-45f4-ac1c-013dfa11cb9c',
+    authorityBase:
+      'https://stashcafe.b2clogin.com/tfp/stashcafe.onmicrosoft.com',
+    policies: {
+      signInSignUp: 'B2C_1_SignInUp',
+      passwordReset: 'B2C_1_PasswordReset',
+    },
+    // redirectUri: Platform.select({ default: undefined }),
+  },
+  // web only:
+  cache: {cacheLocation: 'localStorage'},
+};
+
+export const b2cScopes = [
+  'https://stashcafe.onmicrosoft.com/api/user_impersonation',
+];

package/app/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json"
+}