40 | );
41 | };
42 |
43 | export default Login;
--------------------------------------------------------------------------------
/src/authConfig.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Configuration object to be passed to MSAL instance on creation.
3 | * For a full list of MSAL.js configuration parameters, visit:
4 | * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
5 | */
6 | export const msalConfig = {
7 | auth: {
8 | clientId: "YOUR_AZURE_CLIENT_ID", // REQUIRED: You will need to supply this to make the sample app work
9 | authority: "https://YOUR_TENANT_DOMAIN.b2clogin.com/YOUR_TENANT_DOMAIN.onmicrosoft.com/AZURE_USER_FLOW", // REQUIRED: You will need to supply this to make the sample app work
10 | knownAuthorities: ['YOUR_TENANT_DOMAIN.b2clogin.com'], // Mark your B2C tenant's domain as trusted.
11 | redirectUri: 'http://localhost:3000/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin
12 | postLogoutRedirectUri: 'http://localhost:3000/', // Indicates the page to navigate after logout.
13 | navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
14 | },
15 | cache: {
16 | cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
17 | storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
18 | },
19 | };
20 |
21 | export const loginRequest = {
22 | scopes: ["openid", "profile"],
23 | };
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | ---
4 |
5 | # Azure AD B2C + Descope React Sample App
6 |
7 | This open-source sample app, built with React, demonstrates integration with Azure AD B2C and Descope for authentication. The application showcases the use of Azure AD B2C for user authentication in a React application, leveraging MSAL React hooks.
8 |
9 | Before running the app, you'll need to configure Azure AD B2C and Descope as per the instructions provided [here](https://docs.descope.com/knowledgebase/sso/azureoidc/).
10 |
11 | ## Table of Contents 📝
12 |
13 | 1. [Features](#features)
14 | 2. [Installation](#installation)
15 | 3. [Running the Application](#running-the-application)
16 | 4. [Configuring Azure AD B2C and Descope](#configuring-azure-ad-b2c-and-descope)
17 | 5. [Issue Reporting](#issue-reporting)
18 | 6. [License](#license)
19 |
20 | ## Features ✨
21 |
22 | - **Azure AD B2C Integration**: Seamless integration with Azure AD B2C for user authentication.
23 | - **Descope Authentication**: Leverage Descope as a federated identity provider.
24 | - **React MSAL Usage**: Utilization of MSAL React hooks for handling authentication flows.
25 |
26 | ## Installation 💿
27 |
28 | Clone the repository:
29 |
30 | ```bash
31 | git clone https://github.com/descope-sample-apps/azure-b2c-react-sample-app.git
32 | ```
33 |
34 | Install dependencies:
35 |
36 | ```bash
37 | npm install
38 | # or
39 | yarn install
40 | ```
41 |
42 | ## Configuring Authentication Settings
43 |
44 | Open `src/authConfig.js` and replace the placeholder values with your actual Azure AD B2C settings:
45 |
46 | - **clientId**: Your Azure AD B2C application client ID.
47 | - **authority**: Your Azure AD B2C authority URL.
48 | - **knownAuthorities**: Your Azure AD B2C tenant domain.
49 |
50 | ## Running the Application 🚀
51 |
52 | To start the application:
53 |
54 | ```bash
55 | npm start
56 | # or
57 | yarn start
58 | ```
59 |
60 | Navigate to `http://localhost:3000/` in your browser.
61 |
62 | ## Configuring Azure AD B2C and Descope
63 |
64 | Ensure you have correctly configured Azure AD B2C and Descope. Follow the detailed guide [here](https://docs.descope.com/knowledgebase/sso/azureoidc/) for instructions on setting up Azure AD B2C Tenant, registering the application, and configuring Descope as an Identity Provider.
65 |
66 | ## Issue Reporting ⚠️
67 |
68 | For any issues or suggestions, please [open an issue](https://github.com/descope-sample-apps/azure-b2c-react-sample-app/issues) on GitHub.
69 |
70 | ## License 📜
71 |
72 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
73 |
--------------------------------------------------------------------------------