/msal_react

Auth Code with PKCE flow demo

Primary LanguageJavaScript

BlackAdi Banner

MSAL.JS - Auth Code Flow with PKCE Demo 🛡️

A Simple React App using OAuth2.0 via Microsoft MSAL library.

App feature list

  • Loging via Microsoft Authentication.
  • Using Graph API to fetch user data.

Getting Started

Prerequisites

Node.js must be installed to run this sample.

To get a local copy up and running, follow the given instructions below:

Setup

  1. Register a new application in the Azure Portal. Ensure that the application is enabled for the authorization code flow with PKCE. This will require that you redirect URI configured in the portal is of type SPA.
  2. Clone this repository git clone https://github.com/blackadi/msal_react.git
  3. Create .env file in the root of the repository.
  4. On the command line, navigate to the root of the repository, and run npm install to install the project dependencies via npm.

Running the sample

  1. Configure authentication and authorization parameters:
    1. Open .env
    2. Add REACT_APP_CLIENT_ID:, then add your app/client ID on AAD Portal.
    3. Add REACT_APP_AUTHORITY:, then add "https://login.microsoftonline.com/common/" (note: This is for multi-tenant applications located on the global Azure cloud. For more information, see the documentation).
    4. Add REACT_APP_REDIRECT_URL:, then add the redirect uri you setup on AAD Portal.
    5. Add REACT_APP_GRAPH_ENDPOINT:, after the : add "https://graph.microsoft.com/v1.0/me" (note: This is for MS Graph instance located on the global Azure cloud. For more information, see the documentation).
  2. To start the sample application, run npm start.
  3. Finally, open a browser and navigate to http://localhost:3000.

Installation via Docker

   docker run -it -p 3000:3000 blackadi2019/msal_spa

Live Demo Link