Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 12 views

    C Msal4

    Uploaded by

    Rohan Kapoor

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    C Msal4

    Uploaded by

    Rohan Kapoor
    12 views8 pages

    Original Title

    C MSAL4

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    12 views8 pages

    C Msal4

    Uploaded by

    Rohan Kapoor

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 8

    Here's a detailed guide on integrating Microsoft Authentication Library (MSAL) into a newly

    created React application:

    ---

    ### **Step 1: Prerequisites**


    Before you begin, make sure you have the following:

    - **Node.js** installed on your machine (v12 or higher).


    - **npm** or **yarn** for package management.
    - Basic understanding of React and JavaScript.
    - An Azure account with access to the Azure Active Directory (Azure AD) to register your
    application.

    ---

    ### **Step 2: Create a New React Application**

    1. Open your terminal and run the following command to create a new React app:
    ```bash
    npx create-react-app my-msal-app
    cd my-msal-app
    ```
    2. Once the app is created, you can open it in your preferred code editor.

    ---

    ### **Step 3: Install Necessary Packages**

    Install the MSAL packages using npm or yarn:


    1. Run the following command to install MSAL for React:
    ```bash
    npm install @azure/msal-browser @azure/msal-react
    ```
    or with yarn:
    ```bash
    yarn add @azure/msal-browser @azure/msal-react
    ```

    ---

    ### **Step 4: Register Your App in Azure AD**

    1. Go to the [Azure Portal](https://portal.azure.com/) and log in.


    2. Navigate to **Azure Active Directory** > **App registrations** > **New registration**.
    3. Enter a name for your app and choose the supported account types (e.g., Accounts in this
    organizational directory only).
    4. Set the **Redirect URI** to `http://localhost:3000` (this is the default URL for a React app
    running locally).
    5. Click **Register** to create the app.
    6. Once registered, note down the **Application (client) ID** and **Directory (tenant) ID**.
    You'll need these for configuration.
    7. Under **Authentication**, add a new platform, choose **Single-page application
    (SPA)**, and enter the Redirect URI (`http://localhost:3000`).
    8. Save your changes.

    ---

    ### **Step 5: Configure MSAL in Your React Application**

    1. In your React app, create a new folder called `auth` inside the `src` directory:
    ```
    src/
    └── auth/
    ```
    2. Inside the `auth` folder, create a new file named `msalConfig.js` and add the following
    configuration:
    ```javascript
    import { PublicClientApplication } from "@azure/msal-browser";

    const msalConfig = {
    auth: {
    clientId: "YOUR_CLIENT_ID", // Replace with your client ID
    authority: "https://login.microsoftonline.com/YOUR_TENANT_ID", // Replace with
    your tenant ID
    redirectUri: "http://localhost:3000", // Your redirect URI
    },
    cache: {
    cacheLocation: "sessionStorage", // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you have issues on IE11 or Edge
    }
    };

    const msalInstance = new PublicClientApplication(msalConfig);

    export default msalInstance;


    ```

    ---

    ### **Step 6: Create Authentication Components**


    1. Inside the `auth` folder, create two new files: `AuthProvider.js` and `SignInButton.js`.

    2. **AuthProvider.js:**
    ```javascript
    import React from "react";
    import { MsalProvider } from "@azure/msal-react";
    import msalInstance from "./msalConfig";

    const AuthProvider = ({ children }) => {


    return <MsalProvider instance={msalInstance}>{children}</MsalProvider>;
    };

    export default AuthProvider;


    ```

    3. **SignInButton.js:**
    ```javascript
    import React from "react";
    import { useMsal } from "@azure/msal-react";

    const SignInButton = () => {


    const { instance } = useMsal();

    const handleLogin = () => {


    instance.loginPopup().catch(e => {
    console.error(e);
    });
    };
    return <button onClick={handleLogin}>Sign In</button>;
    };

    export default SignInButton;


    ```

    ---

    ### **Step 7: Update the Main Application**

    1. Open `src/index.js` and wrap the `<App />` component with the `AuthProvider`:
    ```javascript
    import React from "react";
    import ReactDOM from "react-dom";
    import App from "./App";
    import AuthProvider from "./auth/AuthProvider";

    ReactDOM.render(
    <React.StrictMode>
    <AuthProvider>
    <App />
    </AuthProvider>
    </React.StrictMode>,
    document.getElementById("root")
    );
    ```

    2. Open `src/App.js` and update it to include the `SignInButton`:


    ```javascript
    import React from "react";
    import SignInButton from "./auth/SignInButton";

    function App() {
    return (
    <div className="App">
    <header className="App-header">
    <h1>Welcome to MSAL React App</h1>
    <SignInButton />
    </header>
    </div>
    );
    }

    export default App;


    ```

    ---

    ### **Step 8: Run the Application**

    1. In the terminal, start your application by running:


    ```bash
    npm start
    ```
    or with yarn:
    ```bash
    yarn start
    ```

    2. Open your browser and navigate to `http://localhost:3000`. You should see a simple page
    with a "Sign In" button.

    3. Click the "Sign In" button to initiate the Microsoft login process. After successful
    authentication, you should be redirected back to your app.

    ---

    ### **Folder Structure Overview**

    After completing the above steps, your folder structure should look something like this:

    ```
    my-msal-app/
    ├── node_modules/
    ├── public/
    ├── src/
    │ ├── auth/
    │ │ ├── AuthProvider.js
    │ │ ├── msalConfig.js
    │ │ └── SignInButton.js
    │ ├── App.css
    │ ├── App.js
    │ ├── index.css
    │ └── index.js
    ├── .gitignore
    ├── package.json
    ├── README.md
    └── yarn.lock (or package-lock.json)
    ```

    ---

    This guide should provide you with a clear path to integrating MSAL into your React
    application.

    You might also like