Skip to content

Commit e37ccc3

Browse files
OwenRichards1OwenRichards1
committed
add-file-tree-steps
1 parent d39b4cf commit e37ccc3

File tree

3 files changed

+97
-143
lines changed

3 files changed

+97
-143
lines changed

‎articles/active-directory/develop/tutorial-single-page-app-react-call-api.md

Lines changed: 68 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -33,28 +33,15 @@ In this tutorial, you learn how to:
3333

3434
To allow the SPA to request access to Microsoft Graph, a reference to the `graphConfig` object needs to be added. This contains the Graph REST API endpoint defined in *authConfig.js* file.
3535

36-
### [Visual Studio](#tab/visual-studio)
37-
38-
1. Right click on the *src* folder, select **Add** > **New Item**. Create a new file called *graph.js* and select **Add**.
39-
1. Replace the contents of the file with the following code snippet to request access to Microsoft Graph;
36+
1. In the *src* folder, open *graph.js* and replace the contents of the file with the following code snippet to request access to Microsoft Graph.
4037

4138
:::code language="javascript" source="~/ms-identity-docs-code-javascript/react-spa/src/graph.js" :::
4239

43-
### [Visual Studio Code](#tab/visual-studio-code)
44-
45-
1. In the *src* folder, create a new file called *graph.js*.
46-
1. Add the following code snippet to request access to Microsoft Graph;
47-
48-
:::code language="javascript" source="~/ms-identity-docs-code-javascript/react-spa/src/graph.js" :::
49-
50-
---
51-
5240
## Change filename and add required imports
5341

5442
By default, the application runs via a JavaScript file called *App.js*. It needs to be changed to *App.jsx* file, which is an extension that allows a developer to write HTML in React.
5543

56-
1. Rename *App.js* to *App.jsx*.
57-
1. Replace the existing imports with the following snippet;
44+
1. In the *src* folder, open *App.jsx* and replace the contents of the file with the following code snippet to request access.
5845

5946
```javascript
6047
import React, { useState } from 'react';
@@ -75,78 +62,78 @@ By default, the application runs via a JavaScript file called *App.js*. It needs
7562

7663
The `ProfileContent` function is used to render the user's profile information. In the *App.jsx* file, add the following code below your imports:
7764

78-
```javascript
79-
80-
/**
81-
* Renders information about the signed-in user or a button to retrieve data about the user
82-
*/
83-
const ProfileContent = () => {
84-
const { instance, accounts } = useMsal();
85-
const [graphData, setGraphData] = useState(null);
86-
87-
function RequestProfileData() {
88-
// Silently acquires an access token which is then attached to a request for MS Graph data
89-
instance
90-
.acquireTokenSilent({
91-
...loginRequest,
92-
account: accounts[0],
93-
})
94-
.then((response) => {
95-
callMsGraph(response.accessToken).then((response) => setGraphData(response));
96-
});
97-
}
65+
```javascript
9866

99-
return (
100-
<>
101-
<h5 className="card-title">Welcome {accounts[0].name}</h5>
102-
<br/>
103-
{graphData ? (
104-
<ProfileData graphData={graphData} />
105-
) : (
106-
<Button variant="secondary" onClick={RequestProfileData}>
107-
Request Profile Information
108-
</Button>
109-
)}
110-
</>
111-
);
112-
};
113-
```
67+
/**
68+
* Renders information about the signed-in user or a button to retrieve data about the user
69+
*/
70+
const ProfileContent = () => {
71+
const { instance, accounts } = useMsal();
72+
const [graphData, setGraphData] = useState(null);
73+
74+
function RequestProfileData() {
75+
// Silently acquires an access token which is then attached to a request for MS Graph data
76+
instance
77+
.acquireTokenSilent({
78+
...loginRequest,
79+
account: accounts[0],
80+
})
81+
.then((response) => {
82+
callMsGraph(response.accessToken).then((response) => setGraphData(response));
83+
});
84+
}
85+
86+
return (
87+
<>
88+
<h5 className="card-title">Welcome {accounts[0].name}</h5>
89+
<br/>
90+
{graphData ? (
91+
<ProfileData graphData={graphData} />
92+
) : (
93+
<Button variant="secondary" onClick={RequestProfileData}>
94+
Request Profile Information
95+
</Button>
96+
)}
97+
</>
98+
);
99+
};
100+
```
114101

115102
### Replacing the default function to render authenticated information
116103

117104
The following code will render based on whether the user is authenticated or not. Replace the default function `App()` to render authenticated information with the following code:
118105

119-
```javascript
120-
/**
121-
* If a user is authenticated the ProfileContent component above is rendered. Otherwise a message indicating a user is not authenticated is rendered.
122-
*/
123-
const MainContent = () => {
124-
return (
125-
<div className="App">
126-
<AuthenticatedTemplate>
127-
<ProfileContent />
128-
</AuthenticatedTemplate>
129-
130-
<UnauthenticatedTemplate>
131-
<h5>
132-
<center>
133-
Please sign-in to see your profile information.
134-
</center>
135-
</h5>
136-
</UnauthenticatedTemplate>
137-
</div>
138-
);
139-
};
140-
141-
export default function App() {
142-
return (
143-
<PageLayout>
144-
<center>
145-
<MainContent />
146-
</center>
147-
</PageLayout>
148-
);
149-
}
106+
```javascript
107+
/**
108+
* If a user is authenticated the ProfileContent component above is rendered. Otherwise a message indicating a user is not authenticated is rendered.
109+
*/
110+
const MainContent = () => {
111+
return (
112+
<div className="App">
113+
<AuthenticatedTemplate>
114+
<ProfileContent />
115+
</AuthenticatedTemplate>
116+
117+
<UnauthenticatedTemplate>
118+
<h5>
119+
<center>
120+
Please sign-in to see your profile information.
121+
</center>
122+
</h5>
123+
</UnauthenticatedTemplate>
124+
</div>
125+
);
126+
};
127+
128+
export default function App() {
129+
return (
130+
<PageLayout>
131+
<center>
132+
<MainContent />
133+
</center>
134+
</PageLayout>
135+
);
136+
}
150137
```
151138
152139
## Calling the API from the application

‎articles/active-directory/develop/tutorial-single-page-app-react-prepare-spa.md

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,26 @@ Use the following tabs to create a React project within the IDE.
5959
```
6060
---
6161
62+
1. Create additional folders and files to achieve the following folder structure:
63+
64+
```console
65+
├─── public
66+
│ └─── index.html
67+
└───src
68+
├─── components
69+
│ └─── PageLayout.jsx
70+
│ └─── ProfileData.jsx
71+
│ └─── SignInButton.jsx
72+
│ └─── SignOutButton.jsx
73+
└── App.css
74+
└── App.jsx
75+
└── authConfig.js
76+
└── graph.js
77+
└── index.css
78+
└── index.js
79+
```
80+
81+
6282
## Install identity and bootstrap packages
6383
6484
Identity related **npm** packages must be installed in the project to enable user authentication. For project styling, **Bootstrap** will be used.
@@ -85,24 +105,7 @@ To learn more about these packages refer to the documentation in [msal-browser](
85105
86106
## Creating the authentication configuration file
87107
88-
### [Visual Studio](#tab/visual-studio)
89-
90-
1. In the **Solution Explorer**, right-click the *src* folder and select **Add** > **New Item**.
91-
1. Name the file *authConfig.js*, and select **Add**.
92-
1. Open *authConfig.js* and replace the code with the following code snippet.
93-
94-
:::code language="javascript" source="~/ms-identity-docs-code-javascript/react-spa/src/authConfig.js" :::
95-
96-
1. Replace the following values with the values from the Microsoft Entra admin center.
97-
- `clientId` - The identifier of the application, also referred to as the client. Replace `Enter_the_Application_Id_Here` with the **Application (client) ID** value that was recorded earlier from the overview page of the registered application.
98-
- `authority` - This is composed of two parts:
99-
- The *Instance* is endpoint of the cloud provider. Check with the different available endpoints in [National clouds](authentication-national-cloud.md#azure-ad-authentication-endpoints).
100-
- The *Tenant ID* is the identifier of the tenant where the application is registered. Replace the `_Enter_the_Tenant_Info_Here` with the **Directory (tenant) ID** value that was recorded earlier from the overview page of the registered application.
101-
102-
### [Visual Studio Code](#tab/visual-studio-code)
103-
104-
1. In the *src* folder, create a new file called *authConfig.js*.
105-
1. Open *authConfig.js* and add the following code snippet:
108+
1. In the *src* folder, open *authConfig.js* and add the following code snippet:
106109
107110
:::code language="javascript" source="~/ms-identity-docs-code-javascript/react-spa/src/authConfig.js" :::
108111
@@ -112,16 +115,19 @@ To learn more about these packages refer to the documentation in [msal-browser](
112115
- The *Instance* is endpoint of the cloud provider. Check with the different available endpoints in [National clouds](authentication-national-cloud.md#azure-ad-authentication-endpoints).
113116
- The *Tenant ID* is the identifier of the tenant where the application is registered. Replace the `_Enter_the_Tenant_Info_Here` with the **Directory (tenant) ID** value that was recorded earlier from the overview page of the registered application.
114117
118+
1. Save the file.
115119
---
116120
117121
## Modify *index.js* to include the authentication provider
118122
119123
All parts of the app that require authentication must be wrapped in the [`MsalProvider`](/javascript/api/@azure/msal-react/#@azure-msal-react-msalprovider) component. You instantiate a [PublicClientApplication](/javascript/api/@azure/msal-browser/publicclientapplication) then pass it to `MsalProvider`.
120124
121-
1. In the *src* folder, open the *index.js* file and replace the contents of the file with the following code snippet to use the `msal` packages and bootstrap styling:
125+
1. In the *src* folder, open *index.js* and replace the contents of the file with the following code snippet to use the `msal` packages and bootstrap styling:
122126
123127
:::code language="javascript" source="~/ms-identity-docs-code-javascript/react-spa/src/index.js" :::
124128
129+
1. Save the file.
130+
125131
## Next steps
126132
127133
> [!div class="nextstepaction"]

‎articles/active-directory/develop/tutorial-single-page-app-react-sign-in-users.md

Lines changed: 4 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -30,48 +30,7 @@ In this tutorial:
3030

3131
* Completion of the prerequisites and steps in [Tutorial: Prepare an application for authentication](tutorial-single-page-app-react-prepare-spa.md).
3232

33-
## Adding components to the application
34-
35-
The project needs extra files to be created for the page layout, displaying profile data, sign in and sign out options.
36-
37-
### [Visual Studio](#tab/visual-studio)
38-
39-
1. In the Solution Explorer, open the *src* folder.
40-
1. Select **Add** > **New Folder** and name it *components*.
41-
1. Open the *components* folder, and select **Add** > **New Item**.
42-
1. Search for and select **JSX file**, and create the following four files:
43-
- *PageLayout.jsx*
44-
- *ProfileData.jsx*
45-
- *SignInButton.jsx*
46-
- *SignOutButton.jsx*
47-
48-
### [Visual Studio Code](#tab/visual-studio-code)
49-
50-
1. Navigate to the *src* folder in the left panel.
51-
1. Right click on *src*, select **New Folder** and call it *components*.
52-
1. Right click on *components* and using the **New File** option, create the following four files;
53-
- *PageLayout.jsx*
54-
- *ProfileData.jsx*
55-
- *SignInButton.jsx*
56-
- *SignOutButton.jsx*
57-
58-
---
59-
60-
Once complete, you should have the following folder structure.
61-
62-
```txt
63-
reactspalocal/
64-
├── src/
65-
│ ├── components/
66-
│ │ ├── PageLayout.jsx
67-
│ │ ├── ProfileData.jsx
68-
│ │ ├── SignInButton.jsx
69-
│ │ └── SignOutButton.jsx
70-
│ └── ...
71-
└── ...
72-
```
73-
74-
### Adding the page layout
33+
### Adding the page layout component
7534

7635
1. Open *PageLayout.jsx* and add the following code to render the page layout. The [useIsAuthenticated](/javascript/api/@azure/msal-react) hook returns whether or not a user is currently signed-in.
7736

@@ -123,7 +82,7 @@ reactspalocal/
12382

12483
1. Save the file.
12584

126-
### Display profile information
85+
### Display profile information
12786

12887
1. Open the *ProfileData.jsx* and add the following code, which creates a component that displays the user's profile information:
12988

@@ -254,5 +213,7 @@ reactspalocal/
254213

255214
1. Save the file.
256215

216+
## Next steps
217+
257218
> [!div class="nextstepaction"]
258219
> [Tutorial: Call an API from a React single-page app](tutorial-single-page-app-react-call-api.md)

0 commit comments

Comments
 (0)