Add sample for React 18 (#4546)

* Support React 18

* react 18 sample

* Change files

* Update samples/msal-react-samples/react-18-sample/README.md

Co-authored-by: Jo Arroyo <joarroyo@microsoft.com>

Co-authored-by: Jo Arroyo <joarroyo@microsoft.com>

Author: tnorling

change/@azure-msal-react-5f758fc7-cd1d-47b0-841c-59864640d3ce.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add react 18 as supported peer dependency #4546",
+  "packageName": "@azure/msal-react",
+  "email": "thomas.norling@microsoft.com",
+  "dependentChangeType": "patch"
+}

lib/msal-react/FAQ.md

@@ -33,7 +33,7 @@ Please see [here](https://github.com/AzureAD/microsoft-authentication-library-fo
 
 ### What versions of React are supported?
 
-React versions 16 and 17 are supported.
+React versions 16.8.0+, 17 and 18 are supported.
 
 ### Does `@azure/msal-react` support Server Side Rendering (SSR) or static site generation?
 

lib/msal-react/package.json

@@ -42,7 +42,7 @@
   },
   "peerDependencies": {
     "@azure/msal-browser": "^2.22.0",
-    "react": "^16.8.0 || ^17"
+    "react": "^16.8.0 || ^17 || ^18"
   },
   "module": "dist/msal-react.esm.js",
   "devDependencies": {

samples/msal-react-samples/react-18-sample/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

samples/msal-react-samples/react-18-sample/.npmrc

@@ -0,0 +1 @@
+package-lock=false

samples/msal-react-samples/react-18-sample/README.md

@@ -0,0 +1,115 @@
+# MSAL.js for React Sample - Authorization Code Flow in Single-Page Applications
+
+## About this sample
+
+This developer sample is used to run basic use cases for the MSAL library. You can also alter the configuration in `./src/authConfig.js` to execute other behaviors.
+This sample was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Notable files and what they demonstrate
+
+1. `./src/App.js` - Shows implementation of `MsalProvider`, all children will have access to `@azure/msal-react` context, hooks and components.
+1. `./src/index.js` - Shows initialization of the `PublicClientApplication` that is passed to `App.js`
+1. `./src/pages/Home.jsx` - Homepage, shows how to conditionally render content using `AuthenticatedTemplate` and `UnauthenticatedTemplate` depending on whether or not a user is signed in.
+1. `./src/pages/Profile.jsx` - Example of a protected route using `MsalAuthenticationTemplate`. If a user is not yet signed in, signin will be invoked automatically. If a user is signed in it will acquire an access token and make a call to MS Graph to fetch user profile data.
+1. `./src/authConfig.js` - Configuration options for `PublicClientApplication` and token requests.
+1. `./src/ui-components/SignInSignOutButton.jsx` - Example of how to conditionally render a Sign In or Sign Out button using the `useIsAuthenticated` hook.
+1. `./src/ui-components/SignInButton.jsx` - Example of how to get the `PublicClientApplication` instance using the `useMsal` hook and invoking a login function.
+1. `./src/ui-components/SignOutButton.jsx` - Example of how to get the `PublicClientApplication` instance using the `useMsal` hook and invoking a logout function.
+1. `./src/utils/MsGraphApiCall.js` - Example of how to call the MS Graph API with an access token.
+1. `./src/utils/NavigationClient.js` - Example implementation of `INavigationClient` which can be used to override the default navigation functions MSAL.js uses
+
+### (Optional) MSAL React and class components
+
+For a demonstration of how to use MSAL React with class components, see: `./src/pages/ProfileWithMsal.jsx` and `./src/pages/ProfileRawContext.jsx`.
+
+*After* you initialize `MsalProvider`, there are 3 approaches you can take to protect your class components with MSAL React:
+
+1. Wrap each component that you want to protect with `withMsal` higher-order component (HOC) (e.g. [Profile](./src/pages/ProfileWithMsal.jsx#Profile)).
+1. Consume the raw context directly (e.g. [ProfileContent](./src/pages/ProfileRawContext.jsx#ProfileContent)).
+1. Pass context down from a parent component that has access to the `msalContext` via one of the other means above (e.g. [ProfileContent](./src/pages/ProfileWithMsal.jsx#ProfileContent)).
+
+For more information, visit:
+
+- [Docs: Class Components](../../../lib/msal-react/docs/class-components.md)
+- [MSAL React FAQ](../../../lib/msal-react/FAQ.md)
+
+## How to run the sample
+
+### Pre-requisites
+
+- Ensure [all pre-requisites](../../../lib/msal-react/README.md#prerequisites) have been completed to run `@azure/msal-react`.
+- Install node.js if needed (<https://nodejs.org/en/>).
+
+### Configure the application
+
+- Open `./src/authConfig.js` in an editor.
+- Replace client id with the Application (client) ID from the portal registration, or use the currently configured lab registration.
+  - Optionally, you may replace any of the other parameters, or you can remove them and use the default values.
+
+#### Install npm dependencies for sample
+
+##### Installing @azure/msal-react and @azure/msal-browser from local builds
+
+```bash
+# Install dev dependencies for msal-react and msal-browser from root of repo
+npm install
+
+# Change directory to sample directory
+cd samples/msal-react-samples/react-18-sample
+
+# Build packages locally
+npm run build:package
+
+# Install local libs
+npm run install:local
+
+# Install sample dependencies
+npm install
+```
+
+Note: If you suspect you are not using the local builds check that the `package.json` file shows the following dependencies:
+
+```
+"@azure/msal-react": "file:../../../lib/msal-react",
+"@azure/msal-browser": "file:../../../lib/msal-browser",
+"react": "file:../../../lib/msal-react/node_modules/react",
+"react-dom": "file:../../../lib/msal-react/node_modules/react-dom",
+```
+
+##### Installing @azure/msal-react and @azure/msal-browser from released versions available on npm
+
+```bash
+# Change directory to sample directory
+cd samples/msal-react-samples/react-18-sample
+
+# Install packages from npm
+npm run install:published
+
+# Install rest of dependencies
+npm install
+```
+
+#### Running the sample development server
+
+1. In a command prompt, run `npm start`.
+1. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+1. Open [http://localhost:3000/profile](http://localhost:3000/profile) to see an example of a protected route. If you are not yet signed in, signin will be invoked automatically.
+
+The page will reload if you make edits.
+You will also see any lint errors in the console.
+
+- In the web page, click on the "Login" button and select either `Sign in using Popup` or `Sign in using Redirect` to begin the auth flow.
+
+#### Running the sample production server
+
+1. In a command prompt, run `npm run build`.
+1. Next run `serve -s build`
+1. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+1. Open [http://localhost:3000/profile](http://localhost:3000/profile) to see an example of a protected route. If you are not yet signed in, signin will be invoked automatically.
+
+#### Learn more about the 3rd-party libraries used to create this sample
+
+- [React documentation](https://reactjs.org/).
+- [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started)
+- [React Router documentation](https://reactrouterdotcom.fly.dev/docs/en/v6)
+- [Material-UI documentation](https://mui.com/getting-started/installation/)

samples/msal-react-samples/react-18-sample/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "react-18-sample",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@azure/msal-browser": "^2.21.0",
+    "@azure/msal-react": "^1.2.0",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/material": "^5.4.0",
+    "@mui/styles": "^5.3.0",
+    "react": "^18.0.0-rc.0",
+    "react-dom": "^18.0.0-rc.0",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "5.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "build:package": "cd ../../../lib/msal-react & npm run build:all",
+    "install:local": "npm install ../../../lib/msal-react ../../../lib/msal-react/node_modules/react ../../../lib/msal-react/node_modules/react-dom ../../../lib/msal-browser",
+    "install:published": "npm install @azure/msal-browser@latest @azure/msal-react@latest react@^18 react-dom@^18"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

samples/msal-react-samples/react-18-sample/public/favicon.ico

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>