![]() ![]() ![]() The App component mounts the PageLayout and its Pages child element. All components underneath MsalProvider will have access to the PublicClientApplication instance via context and all hooks and components provided by MSAL React. It wraps everything between MsalProvider component. The App component is the top level component of your app. Src/App.jsx - Defines the App and Pages components: After instantiation of the MSAL library, the JavaScript code passes the msalInstance as props to your application components.The MSAL React should be instantiated outside of the component tree to prevent it from being reinstantiated on re-renders. Initiates the MSAL PublicClientApplication library with the configuration defined in the authConfig.js file.Mounts the App as the root component into the public/index.html page's element.Src/index.js - The JavaScript entry point to your application. The React app uses this information to establish a trust relationship with Azure AD B2C, sign in and sign out the user, acquire tokens, and validate the tokens. Src/authConfig.js - A configuration file that contains information about your Azure AD B2C identity provider and the web API service. If you open it directly in the browser, you'll see an empty page. ![]() Public/index.html- The bundling process uses this file as a template and injects the React components into the element. Add these components from the sample React app to your own app: The sample code is made up of the following components. Step 3: Add the authentication components Run the following command in your command shell: npm i the Bootstrap for React (optional, for UI): npm i bootstrap react-bootstrap The react-router-dom package contains bindings for using React Router in web applications. To install the MSAL Browser and MSAL React libraries in your application, run the following command in your command shell: npm i the react-router-dom version 5.*. To create a new project, run the following commands in your command shell: npx create-react-app my-app You can use an existing React app, or create a new React App. Review the prerequisites and integration steps in the Configure authentication in a sample React single-page application article. After you complete the steps in this article, your application will accept sign-ins via Azure AD B2C. Substitute the sample React app with your own React app. Use this article with the related article titled Configure authentication in a sample React single-page application. Learn how to integrate a React application with the MSAL for React authentication library. This article shows you how to add Azure Active Directory B2C (Azure AD B2C) authentication to your own React single-page application (SPA). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |