:monkey_face: Our code monkeys live on a solid diet of :star:'s. If you like what they're doing, please feed them!
12 |
13 | # React AAD MSAL
14 |
15 | A library of components to easily integrate the Microsoft Authentication Library with Azure Active Directory in your React app quickly and reliably. The library focuses on flexibility, providing functionality to login, logout, and fetch the user details while maintaining access to the underlying MSAL library for advanced use.
16 |
17 | **:exclamation: This library is not affiliated with the Identity team at Microsoft. It was developed as a tool for the Open Source community to use and contribute to as they see fit.**
18 |
19 | ## :memo: Table of contents
20 |
21 | - [React AAD MSAL](#react-aad-msal)
22 | - [:memo: Table of contents](#memo-table-of-contents)
23 | - [:tada: Features](#tada-features)
24 | - [:checkered_flag: Getting Started](#checkeredflag-getting-started)
25 | - [Prerequisites](#prerequisites)
26 | - [Installation](#installation)
27 | - [Creating the Provider](#creating-the-provider)
28 | - [Msal Configuration](#msal-configuration)
29 | - [Authentication Parameters](#authentication-parameters)
30 | - [Options](#options)
31 | - [:package: Authentication Components](#package-authentication-components)
32 | - [AzureAD Component](#azuread-component)
33 | - [Higher Order Component](#higher-order-component)
34 | - [:mortar_board: Advanced Topics](#mortarboard-advanced-topics)
35 | - [Getting Tokens for API Requests](#getting-tokens-for-api-requests)
36 | - [Refreshing Access Tokens](#refreshing-access-tokens)
37 | - [Renewing IdTokens](#renewing-idtokens)
38 | - [Integrating with a Redux Store](#integrating-with-a-redux-store)
39 | - [Accessing the MSAL API](#accessing-the-msal-api)
40 | - [:cd: Sample applications](#cd-sample-applications)
41 | - [:calendar: Roadmap](#calendar-roadmap)
42 | - [:books: Resources](#books-resources)
43 | - [:trophy: Contributors](#trophy-contributors)
44 |
45 | ## :tada: Features
46 |
47 | :white_check_mark: Login/logout with `AzureAD` component
48 | :white_check_mark: Callback functions for login success, logout success, and user info changed
49 | :white_check_mark: `withAuthentication` higher order component for protecting components, routes, or the whole app
50 | :white_check_mark: Function as Child Component pattern ([FaCC](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9)) to pass authentication data and login/logout functions to children components
51 | :white_check_mark: Redux integration for storing authentication status, user info, tokens, etc
52 | :white_check_mark: Automatic renewal of IdTokens, and optional function to get a fresh token at any point
53 | :white_check_mark: Easily fetch a fresh Access Token from cache (or refresh it) before calling API endpoints
54 | :white_check_mark: Various build types including ES6, CommonJS, and UMD
55 |
56 | ## :checkered_flag: Getting Started
57 |
58 | ### Prerequisites
59 |
60 | - [node.js](https://nodejs.org/en/)
61 | - [Register an app](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app) in AzureAD to get a `clientId`. You will need to [follow additional steps](https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration) to enable the app for your SPA site.
62 |
63 | ### Installation
64 |
65 | Via NPM:
66 |
67 | ```
68 | npm install react-aad-msal msal --save
69 | ```
70 |
71 | ### Creating the Provider
72 |
73 | Before beginning it is required to configure an instance of the `MsalAuthProvider` and give it three parameters:
74 |
75 | | Parameters | Description |
76 | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
77 | | `config` | Instance of a `Msal.Configuration` object to configure the underlying provider. The documentation for all the options can be found in the [configuration options](https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications#configuration-options) doc |
78 | | `parameters` | Instance of the `Msal.AuthenticationParameters` configuration to identify how the authentication process should function. This object includes the `scopes` values. You can see possible [values for scopes here](https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-scopes) |
79 | | `options` | **[Optional]** The `options` are defined by the [IMsalAuthProviderConfig](/packages/react-aad-msal/src/interfaces/IMsalAuthProviderConfig.ts) interface. This contains settings that describe how the authentication provider should handle certain authentication processes. |
80 |
81 | The `MsalAuthProvider` is meant to be a singleton. There are known implications when multiple instances of MSAL are running at the same time. The recommended approach is to instantiate the `MsalAuthProvider` in a separate file and `import` it when needed.
82 |
83 | ```TypeScript
84 | // authProvider.js
85 | import { MsalAuthProvider, LoginType } from 'react-aad-msal';
86 |
87 | // Msal Configurations
88 | const config = {
89 | auth: {
90 | authority: 'https://login.microsoftonline.com/common',
91 | clientId: '',
92 | redirectUri: ''
93 | },
94 | cache: {
95 | cacheLocation: "localStorage",
96 | storeAuthStateInCookie: true
97 | }
98 | };
99 |
100 | // Authentication Parameters
101 | const authenticationParameters = {
102 | scopes: [
103 | '',
104 | 'https://.onmicrosoft.com//'
105 | ]
106 | }
107 |
108 | // Options
109 | const options = {
110 | loginType: LoginType.Popup,
111 | tokenRefreshUri: window.location.origin + '/auth.html'
112 | }
113 |
114 | export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)
115 | ```
116 |
117 | Now you can `import` the `authProvider` and use it in combination with one of the authentication components.
118 |
119 | ```tsx
120 | // index.js
121 | import React from 'react';
122 | import ReactDOM from 'react-dom';
123 | import { AzureAD } from 'react-aad-msal';
124 |
125 | import App from './App';
126 | import { authProvider } from './authProvider';
127 |
128 | ReactDOM.render(
129 |
130 |
131 | ,
132 | document.getElementById('root'),
133 | );
134 | ```
135 |
136 | #### `Msal` Configuration
137 |
138 | The options that get passed to the `MsalAuthProvider` are defined by the MSAL library, and are described in more detail in the [configuration options](https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications#configuration-options) documentation.
139 |
140 | Below is the total set of configurable options that are supported currently in the `config`.
141 |
142 | ```TypeScript
143 | // Configuration Object
144 | export type Configuration = {
145 | auth: AuthOptions,
146 | cache?: CacheOptions,
147 | system?: SystemOptions
148 | };
149 |
150 | // Protocol Support
151 | export type AuthOptions = {
152 | clientId: string;
153 | authority?: string;
154 | validateAuthority?: boolean;
155 | redirectUri?: string | (() => string);
156 | postLogoutRedirectUri?: string | (() => string);
157 | navigateToLoginRequestUrl?: boolean;
158 | };
159 |
160 | // Cache Support
161 | export type CacheOptions = {
162 | cacheLocation?: CacheLocation;
163 | storeAuthStateInCookie?: boolean;
164 | };
165 |
166 | // Library support
167 | export type SystemOptions = {
168 | logger?: Logger;
169 | loadFrameTimeout?: number;
170 | tokenRenewalOffsetSeconds?: number;
171 | navigateFrameWait?: number;
172 | };
173 | ```
174 |
175 | For more information on MSAL config options refer to the MSAL [configuration options](https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications) documentation.
176 |
177 | #### Authentication Parameters
178 |
179 | When instantiating an instance of the `MsalAuthProvider` the authentication parameters passed will become the default parameters used when authenticating and fetching or refreshing tokens. It is possible to change the default parameters later by executing the `setAuthenticationParameters()` method on the `MsalAuthProvider`.
180 |
181 | The set of options that are supported for the `Msal.AuthenticationParameters` class can be found below as they are defined in the MSAL library.
182 |
183 | ```TypeScript
184 | export type AuthenticationParameters = {
185 | scopes?: Array;
186 | extraScopesToConsent?: Array;
187 | prompt?: string;
188 | extraQueryParameters?: {[key: string]: string};
189 | claimsRequest?: string;
190 | authority?: string;
191 | state?: string;
192 | correlationId?: string;
193 | account?: Account;
194 | sid?: string;
195 | loginHint?: string;
196 | };
197 | ```
198 |
199 | #### Options
200 |
201 | The `options` parameter defines settings related to how the authentication provider processes authentication operations provided by the `MSAL` library.
202 |
203 | ```typescript
204 | const options = {
205 | // The default login type is Popup
206 | loginType: LoginType.Popup,
207 | // A blank html page that MSAL can load in an iframe to refresh the token
208 | // The default setting for this parameter is `window.location.origin`
209 | tokenRefreshUri: window.location.origin + '/auth.html',
210 | };
211 | ```
212 |
213 | `LoginType` is an enum with two options for `Popup` or `Redirect` authentication. This parameter is optional and will default to `Popup` if not provided. The `tokenRefreshUri` allows you to set a separate page to load only when tokens are being refreshed. When `MSAL` attempts to refresh a token, it will reload the page in an iframe. This option allows you to inform `MSAL` of a specific page it can load in the iframe. It is best practice to use a blank HTML file so as to prevent all your site scripts and contents from loading multiple times.
214 |
215 | At any time after instantiating the `MsalAuthProvider` the login type can be changed using the `setProviderOptions()` method. You may also retrieve the current options using the `getProviderOptions()` method.
216 |
217 | ## :package: Authentication Components
218 |
219 | The library provides multiple components to integrate Azure AD authentication into your application and each component has various use cases. The are also plans for additional components, documented in the project [Roadmap](#calendar-roadmap).
220 |
221 | ### AzureAD Component
222 |
223 | The `AzureAD` component is the primary method to add authentication to your application. When the component is loaded it internally uses MSAL to check the cache and determine the current authentication state. The users authentication status determines how the component will render the `children`.
224 |
225 | 1. If the `children` is an element, it will only be rendered when the `AzureAD` detects an authenticated user.
226 | 2. If the `children` is a function, then it will always be executed with the following argument:
227 | ```tsx
228 | {
229 | login, // login function
230 | logout, // logout function
231 | authenticationState, // the current authentication state
232 | error, // any error that occurred during the login process
233 | accountInfo, // account info of the authenticated user
234 | }
235 | ```
236 |
237 | The `AzureAD` component will check that the IdToken is not expired before determining that the user is authenticated. If the token has expired, it will attempt to renew it silently. If a valid token is maintained it will be sure there is an active Access Token available, otherwise it will refresh silently. If either of the tokens cannot be refreshed without user interaction, the user will be prompted to signin again.
238 |
239 | ```tsx
240 | import { AzureAD, AuthenticationState, AuthenticationState } from 'react-aad-msal';
241 |
242 | // Import the provider created in a different file
243 | import { authProvider } from './authProvider';
244 |
245 | // Only authenticated users can see the span, unauthenticated users will see nothing
246 |
247 | Only authenticated users can see me.
248 |
249 |
250 | // If the user is not authenticated, login will be initiated and they will see the span when done
251 |
252 | Only authenticated users can see me.
253 |
254 |
255 | // Using a function inside the component will give you control of what to show for each state
256 |
257 | {
258 | ({login, logout, authenticationState, error, accountInfo}) => {
259 | switch (authenticationState) {
260 | case AuthenticationState.Authenticated:
261 | return (
262 |
51 | This example shows how you can use the AzureAD component to redirect the login screen automatically on
52 | page load. Click the checkbox below to enable the redirect and refresh your browser window.
53 |
If authentication fails, this box will have the errors that occurred
108 | {error && (
109 |
110 |
111 | errorCode: {error.errorCode}
112 |
113 |
114 | errorMessage: {error.errorMessage}
115 |
116 |
117 | )}
118 |
119 |
120 |
121 | );
122 | }}
123 |
124 |
125 | );
126 | }
127 | }
128 |
129 | export default App;
130 |
--------------------------------------------------------------------------------
/samples/react-javascript/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/samples/react-javascript/src/GetAccessTokenButton.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export default function GetTokenButton({ provider }) {
4 | const getAuthToken = () => {
5 | // You should should use getAccessToken() to fetch a fresh token before making API calls
6 | provider.getAccessToken().then(token => {
7 | alert(token.accessToken);
8 | });
9 | };
10 |
11 | return (
12 |
13 |
14 | You can use the auth provider to get a fresh token. If a valid token is in cache it will be returned, otherwise
15 | a fresh token will be requested. If the request fails, the user will be forced to login again.
16 |
13 | It's also possible to renew the IdToken. If a valid token is in the cache, it will be returned. Otherwise a
14 | renewed token will be requested. If the request fails, the user will be forced to login again.
15 |
16 | You can use the auth provider to get a fresh token. If a valid token is
17 | in cache it will be returned, otherwise a fresh token will be requested.
18 | If the request fails, the user will be forced to login again.
19 |
16 | It's also possible to renew the IdToken. If a valid token is in the
17 | cache, it will be returned. Otherwise a renewed token will be requested.
18 | If the request fails, the user will be forced to login again.
19 |
12 | example will launch a popup dialog to allow for authentication with
13 | Azure Active Directory
14 |
15 |
16 |
17 | ) : (
18 |
19 |
Automatic Redirect
20 |
21 | example shows how you can use the AzureAD component to redirect the reen
22 | automatically on page load.Click the checkbox below to enable the
23 | redirect and refresh your browser window.
24 |
25 |
26 |
27 | );
28 |
--------------------------------------------------------------------------------
/samples/react-typescript/src/authProvider.ts:
--------------------------------------------------------------------------------
1 | import { MsalAuthProvider, LoginType } from "react-aad-msal";
2 | import { LogLevel, Logger } from "msal";
3 |
4 | const logger = new Logger(
5 | (logLevel, message, containsPii) => {
6 | console.log("[MSAL]", message);
7 | },
8 | {
9 | level: LogLevel.Verbose,
10 | piiLoggingEnabled: false
11 | }
12 | );
13 |
14 | // The auth provider should be a singleton. Best practice is to only have it ever instantiated once.
15 | // Avoid creating an instance inside the component it will be recreated on each render.
16 | // If two providers are created on the same page it will cause authentication errors.
17 | export const authProvider = new MsalAuthProvider(
18 | {
19 | auth: {
20 | authority: "https://login.microsoftonline.com/common",
21 | clientId: "0f2c6253-3928-4fea-b131-bf6ef8f69e9c",
22 | postLogoutRedirectUri: window.location.origin,
23 | redirectUri: window.location.origin,
24 | validateAuthority: true,
25 |
26 | // After being redirected to the "redirectUri" page, should user
27 | // be redirected back to the Url where their login originated from?
28 | navigateToLoginRequestUrl: false
29 | },
30 | // Enable logging of MSAL events for easier troubleshooting.
31 | // This should be disabled in production builds.
32 | system: {
33 | logger: logger as any
34 | },
35 | cache: {
36 | cacheLocation: "sessionStorage",
37 | storeAuthStateInCookie: false
38 | }
39 | },
40 | {
41 | scopes: ["openid"]
42 | },
43 | {
44 | loginType: LoginType.Popup,
45 | // When a token is refreshed it will be done by loading a page in an iframe.
46 | // Rather than reloading the same page, we can point to an empty html file which will prevent
47 | // site resources from being loaded twice.
48 | tokenRefreshUri: window.location.origin + "/auth.html"
49 | }
50 | );
51 |
--------------------------------------------------------------------------------
/samples/react-typescript/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/samples/react-typescript/src/index.tsx:
--------------------------------------------------------------------------------
1 | import "react-app-polyfill/ie11";
2 | import "react-app-polyfill/stable";
3 |
4 | import React from "react";
5 | import ReactDOM from "react-dom";
6 | import "./index.css";
7 | import App from "./App";
8 | import { Provider } from "react-redux";
9 | import { basicReduxStore } from "./reduxStore";
10 |
11 | import * as serviceWorker from "./serviceWorker";
12 |
13 | ReactDOM.render(
14 |
15 |
16 | ,
17 | document.getElementById("root")
18 | );
19 |
20 | // If you want your app to work offline and load faster, you can change
21 | // unregister() to register() below. Note this comes with some pitfalls.
22 | // Learn more about service workers: https://bit.ly/CRA-PWA
23 | serviceWorker.unregister();
24 |
--------------------------------------------------------------------------------
/samples/react-typescript/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/samples/react-typescript/src/reduxStore.ts:
--------------------------------------------------------------------------------
1 | import { createStore, Reducer, compose } from "redux";
2 | import { AuthenticationActions, AuthenticationState } from "react-aad-msal";
3 |
4 | // add redux devtools extension as a property/method in window
5 | declare global {
6 | interface Window {
7 | __REDUX_DEVTOOLS_EXTENSION__?: typeof compose;
8 | }
9 | }
10 |
11 | const initialState = {
12 | initializing: false,
13 | initialized: false,
14 | idToken: null,
15 | accessToken: null,
16 | state: AuthenticationState.Unauthenticated
17 | };
18 |
19 | const rootReducer: Reducer = (
20 | state = initialState,
21 | action: { type: any; payload: { account: any } }
22 | ) => {
23 | switch (action.type) {
24 | case AuthenticationActions.Initializing:
25 | return {
26 | ...state,
27 | initializing: true,
28 | initialized: false
29 | };
30 | case AuthenticationActions.Initialized:
31 | return {
32 | ...state,
33 | initializing: false,
34 | initialized: true
35 | };
36 | case AuthenticationActions.AcquiredIdTokenSuccess:
37 | return {
38 | ...state,
39 | idToken: action.payload
40 | };
41 | case AuthenticationActions.AcquiredAccessTokenSuccess:
42 | return {
43 | ...state,
44 | accessToken: action.payload
45 | };
46 | case AuthenticationActions.AcquiredAccessTokenError:
47 | return {
48 | ...state,
49 | accessToken: null
50 | };
51 | case AuthenticationActions.LoginSuccess:
52 | return {
53 | ...state,
54 | account: action.payload.account
55 | };
56 | case AuthenticationActions.LoginError:
57 | case AuthenticationActions.AcquiredIdTokenError:
58 | case AuthenticationActions.LogoutSuccess:
59 | return { ...state, idToken: null, accessToken: null, account: null };
60 | case AuthenticationActions.AuthenticatedStateChanged:
61 | return {
62 | ...state,
63 | state: action.payload
64 | };
65 | default:
66 | return state;
67 | }
68 | };
69 |
70 | export const basicReduxStore = createStore(
71 | rootReducer,
72 | // Enable the Redux DevTools extension if available
73 | /// See more: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfiblj
74 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
75 | );
76 |
--------------------------------------------------------------------------------
/samples/react-typescript/src/serviceWorker.ts:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === "localhost" ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === "[::1]" ||
17 | // 127.0.0.0/8 are considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | type Config = {
24 | onSuccess?: (registration: ServiceWorkerRegistration) => void;
25 | onUpdate?: (registration: ServiceWorkerRegistration) => void;
26 | };
27 |
28 | export function register(config?: Config) {
29 | if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
30 | // The URL constructor is available in all browsers that support SW.
31 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
32 | if (publicUrl.origin !== window.location.origin) {
33 | // Our service worker won't work if PUBLIC_URL is on a different origin
34 | // from what our page is served on. This might happen if a CDN is used to
35 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
36 | return;
37 | }
38 |
39 | window.addEventListener("load", () => {
40 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
41 |
42 | if (isLocalhost) {
43 | // This is running on localhost. Let's check if a service worker still exists or not.
44 | checkValidServiceWorker(swUrl, config);
45 |
46 | // Add some additional logging to localhost, pointing developers to the
47 | // service worker/PWA documentation.
48 | navigator.serviceWorker.ready.then(() => {
49 | console.log(
50 | "This web app is being served cache-first by a service " +
51 | "worker. To learn more, visit https://bit.ly/CRA-PWA"
52 | );
53 | });
54 | } else {
55 | // Is not localhost. Just register service worker
56 | registerValidSW(swUrl, config);
57 | }
58 | });
59 | }
60 | }
61 |
62 | function registerValidSW(swUrl: string, config?: Config) {
63 | navigator.serviceWorker
64 | .register(swUrl)
65 | .then(registration => {
66 | registration.onupdatefound = () => {
67 | const installingWorker = registration.installing;
68 | if (installingWorker == null) {
69 | return;
70 | }
71 | installingWorker.onstatechange = () => {
72 | if (installingWorker.state === "installed") {
73 | if (navigator.serviceWorker.controller) {
74 | // At this point, the updated precached content has been fetched,
75 | // but the previous service worker will still serve the older
76 | // content until all client tabs are closed.
77 | console.log(
78 | "New content is available and will be used when all " +
79 | "tabs for this page are closed. See https://bit.ly/CRA-PWA."
80 | );
81 |
82 | // Execute callback
83 | if (config && config.onUpdate) {
84 | config.onUpdate(registration);
85 | }
86 | } else {
87 | // At this point, everything has been precached.
88 | // It's the perfect time to display a
89 | // "Content is cached for offline use." message.
90 | console.log("Content is cached for offline use.");
91 |
92 | // Execute callback
93 | if (config && config.onSuccess) {
94 | config.onSuccess(registration);
95 | }
96 | }
97 | }
98 | };
99 | };
100 | })
101 | .catch(error => {
102 | console.error("Error during service worker registration:", error);
103 | });
104 | }
105 |
106 | function checkValidServiceWorker(swUrl: string, config?: Config) {
107 | // Check if the service worker can be found. If it can't reload the page.
108 | fetch(swUrl, {
109 | headers: { "Service-Worker": "script" }
110 | })
111 | .then(response => {
112 | // Ensure service worker exists, and that we really are getting a JS file.
113 | const contentType = response.headers.get("content-type");
114 | if (
115 | response.status === 404 ||
116 | (contentType != null && contentType.indexOf("javascript") === -1)
117 | ) {
118 | // No service worker found. Probably a different app. Reload the page.
119 | navigator.serviceWorker.ready.then(registration => {
120 | registration.unregister().then(() => {
121 | window.location.reload();
122 | });
123 | });
124 | } else {
125 | // Service worker found. Proceed as normal.
126 | registerValidSW(swUrl, config);
127 | }
128 | })
129 | .catch(() => {
130 | console.log(
131 | "No internet connection found. App is running in offline mode."
132 | );
133 | });
134 | }
135 |
136 | export function unregister() {
137 | if ("serviceWorker" in navigator) {
138 | navigator.serviceWorker.ready.then(registration => {
139 | registration.unregister();
140 | });
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/samples/react-typescript/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import "@testing-library/jest-dom/extend-expect";
6 |
--------------------------------------------------------------------------------
/samples/react-typescript/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "module": "esnext",
16 | "moduleResolution": "node",
17 | "resolveJsonModule": true,
18 | "noEmit": true,
19 | "jsx": "react",
20 | "isolatedModules": true
21 | },
22 | "include": [
23 | "src"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
5 | 
