You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React AAD MSAL is a library to easily integrate the Microsoft Authentication Library with Azure Active Directory in your React app quickly and reliably. The library focuses on flexibility, allowing you to define how you want to interact with logins and logouts.
7
6
8
-
## Sample Application
9
-
A sample React-based Single Page Application (SPA) that uses this component is available in the [sample folder](sample/README.md).
7
+
## Features
8
+
9
+
React AAD MSAL is a library that allows you to easily integrate auth using Azure Active Directory into your React application. The library focuses on flexibility, allowing you to define how you want to interact with logins and logouts.
10
+
11
+
The React AAD MSAL library provides the following features:
12
+
13
+
* Login using Azure Active Directory
14
+
- create your own function that handles how login (using this AzureAD component) is triggered in your react app
15
+
- create your own function that handles the login success. The AzureAD library will call this function when login is complete to pass back the user info.
16
+
* Logout callback
17
+
- create your own function to handle how logout (using this AzureAD component) is triggered in your react app
18
+
* Optional use of redux store containing the token and user information returned from Active Directory
19
+
20
+
## Getting Started
21
+
22
+
### Prerequisites
23
+
24
+
-[node.js](https://nodejs.org/en/)
25
+
26
+
### Installation
27
+
28
+
-`npm install react-aad-msal`
29
+
30
+
### Quickstart
31
+
32
+
If you'd like a sample application running, please see the [sample readme](sample/README.md).
In the render module of your component, make sure to create an AzureAD component with the arguments you need. This uses the functions that you will define. Once the user is successfully authenticated, the component will render the JSX returned by the `authenticatedFunction`, which in this case is called `logoutCallback`. This is where you should put the secure, user-specific parts of your app. `loginCallback` and `printUserInfo` can be any user defined functions.
13
44
14
45
Find the assignment for ClientID and replace the value with the Application ID for your application from the azure portal. The authority is the sign-in/signup policy for your application. Graph scopes is a list of scope URLs that you want to grant access to. You can find more information on the [active directory MSAL single page app azure sample](https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp).
15
46
16
-
```javascript
47
+
```jsx
17
48
// ...
18
49
19
50
return (
20
51
<AzureAD
21
52
clientID={'<Application ID for your application>'}
@@ -31,42 +62,21 @@ Find the assignment for ClientID and replace the value with the Application ID f
31
62
32
63
## Component Properties
33
64
34
-
### Required
35
-
36
-
-`clientID`: String representing your Azure Active Directory Application ID
37
-
38
-
-`scopes`: Array of permission scopes you want to request from the application you are authenticating against. You can see possible [values for this property here](https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-scopes)
39
-
40
-
-`authenticatedFunction`: A user defined callback function for the AzureAD component to consume. This function receives the AzureAD components logout function, and returns JSX containing the logged in portion of your app. You can use this received logout callback to attach it to any part of your logged in portion of your application.
41
-
42
-
-`unauthenticatedFunction`: A user defined callback function for the AzureAD component to consume. This function receives the AzureAD components login function which you can then use to trigger a login as you like
43
-
44
-
-`userInfoCallback`: A user defined callback function. The AzureAD library will calls this function when login is complete to pass back the user info in the following format:
45
-
46
-
```javascript
47
-
IUserInfo {
48
-
jwtAccessToken: string,
49
-
jwtIdToken: string,
50
-
user:Msal.User
51
-
}
52
-
```
53
-
54
-
The format of [`Msal.User` can be found here](https://htmlpreview.github.io/?https://raw.githubusercontent.com/AzureAD/microsoft-authentication-library-for-js/dev/docs/classes/_user_.user.html)
55
-
56
-
- Child Component: You should provide a child component to the AzureAD component, this will be rendered when login is successful
57
-
58
-
### Optional
59
-
60
-
-`authority`:A string representing your Azure Active Directory application policy. Includeif you are trying to authenticate against your Azure Active Directory application. If you're using a B2C AAD, it is usually in the format of: `https://login.microsoftonline.com/tfp/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>`
61
-
62
-
- `type`: `LoginType.Popup`. Popup is currently the only type available; redirect is currently buggy and disabled.
63
-
64
-
- `reduxStore`: If you want to use redux for auth, you can provide a redux store which the AzureAD component will dispatch a `AAD_LOGIN_SUCCESS` action, as well as a `payload` containing `IUserInfo`
65
+
| Property | Description |
66
+
| --- | --- |
67
+
|`clientID`| String representing your Azure Active Directory Application ID |
68
+
|`scopes`| Array of permission scopes you want to request from the application you are authenticating against. You can see possible [values for this property here](https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-scopes)|
69
+
|`authenticatedFunction`| A user defined callback function for the AzureAD component to consume. This function receives the AzureAD components logout function, and returns JSX containing the logged in portion of your app. You can use this received logout callback to attach it to any part of your logged in portion of your application |
70
+
|`unauthenticatedFunction`| A user defined callback function for the AzureAD component to consume. This function receives the AzureAD components login function which you can then use to trigger a login as you like |
71
+
|`userInfoCallback`| A user defined callback function. The AzureAD library will calls this function when login is complete to pass back the user info in the following format: <br /><br /> ``` UserInfo { jwtAccessToken: string, jwtIdToken: string, user: Msal.User }``` <br /> <br /> The format of `Msal.User`[can be found here](https://htmlpreview.github.io/?https://raw.githubusercontent.com/AzureAD/microsoft-authentication-library-for-js/dev/docs/classes/_user_.user.html)|
72
+
|`authority`|**[Optional]** A string representing your Azure Active Directory application policy. Include if you are trying to authenticate against your Azure Active Directory application. If you're using a B2C AAD, it is usually in the format of: `https://login.microsoftonline.com/tfp/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>`|
73
+
|`type`|**[Optional]**`LoginType.Popup`. Popup is currently the only type available; redirect is currently buggy and disabled. |
74
+
|`reduxStore`|**[Optional]** If you want to use redux for auth, you can provide a redux store which the AzureAD component will dispatch a `AAD_LOGIN_SUCCESS` action, as well as a `payload` containing `IUserInfo`|
65
75
66
76
## Login
67
77
To login, first create a callback function for the AzureAD component to consume. This function will be called when the component loads, and it will pass in the function to be called when the user wants to login. In this case, we create a button that will log the user in.
68
78
69
-
```javascript
79
+
```jsx
70
80
importAzureADfrom'AzureAD'
71
81
72
82
loginCallback= (login) => {
@@ -78,14 +88,10 @@ loginCallback = (login) => {
78
88
79
89
Once they're logged in, the AzureAD library will call another function given with an `IUserInfo` instance. You can do whatever you want with this, but you should store it. In this example, we just print it out to console.
80
90
81
-
```javascript
82
-
// ...
83
-
91
+
```javascript
84
92
printUserInfo= (userInfo) => {
85
93
console.log(userInfo)
86
94
};
87
-
88
-
// ...
89
95
```
90
96
91
97
Once you've set this up, you should be able to set up a button to login that will hit an AAD instance. To set up your instance, check out the documentation on [Azure Active Directory](https://docs.microsoft.com/en-us/azure/active-directory/get-started-azure-ad) and on how to connect an [Identity Provider](https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-setup-msa-app) for that AAD instance.
@@ -94,7 +100,7 @@ Once you've set this up, you should be able to set up a button to login that wil
You can, of course, include a component in either of these functions. This allows you to gate which view of your application users get, based on whether or not they are authenticated.
109
115
110
-
## Samples
111
-
112
-
If you want to run examples of this library out of the box, feel free to go to [the samples repo](https://reactaad.visualstudio.com/react-aad-msal/). There you'll find a couple implementations that leverage the library, as well as a tutorial of how to set up Azure Active Directory with an Identity Provider.
113
-
114
116
## Integrating with a Redux Store
115
117
116
118
The Azure AD component optionally accepts a ```reduxStore``` prop. On successful login, Azure AD will dispatch an action of type ```AAD_LOGIN_SUCCESS``` to the provided store, containing the token and user information returned from Active Directory. It does the same for logout events, but the action will not contain a payload.
117
119
118
120
Import your store into the file rendering the AzureAD component and pass it in:
A sample React-based Single Page Application (SPA) that uses this component is available in the [sample folder](sample/README.md). There you'll find a couple implementations that leverage the library, as well as a tutorial of how to set up Azure Active Directory with an Identity Provider.
0 commit comments