Skip to content

Commit d611a3b

Browse files
author
Steve Hobbs
authored
Replace docs notes
1 parent 12c4751 commit d611a3b

File tree

1 file changed

+5
-15
lines changed

1 file changed

+5
-15
lines changed

02-Calling-an-API/TUTORIAL.md

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -127,9 +127,7 @@ Now open `angular.json` and add a reference to the proxy config. In the `serve`
127127
...
128128
```
129129

130-
::: note
131-
In order for these changes to take effect, you will need to stop and restart the run script.
132-
:::
130+
> In order for these changes to take effect, you will need to stop and restart the run script.
133131

134132
## Update the Authentication Service
135133

@@ -164,11 +162,9 @@ getTokenSilently$(options?): Observable<string> {
164162
165163
If you'd like to [pass options to `getTokenSilently`](https://auth0.github.io/auth0-spa-js/classes/auth0client.html#gettokensilently) when calling the method, you can do so.
166164
167-
:::note
168-
**Why isn't the token stored in browser storage?** Historically, it was common to store tokens in local or session storage. However, browser storage is [not a secure place to store sensitive data](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage). The [`auth0-spa-js` SDK](https://auth0.com/docs/libraries/auth0-spa-js) manages session retrieval for you so that you no longer need to store sensitive data in browser storage in order to restore sessions after refreshing a Single Page Application.
165+
> **Why isn't the token stored in browser storage?** Historically, it was common to store tokens in local or session storage. However, browser storage is [not a secure place to store sensitive data](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#local-storage). The [`auth0-spa-js` SDK](https://auth0.com/docs/libraries/auth0-spa-js) manages session retrieval for you so that you no longer need to store sensitive data in browser storage in order to restore sessions after refreshing a Single Page Application.
169166
170167
With `auth0-spa-js`, we can simply request the token from the SDK when we need it (e.g., in an HTTP interceptor) rather than storing it locally in the Angular app or browser. The SDK manages token freshness as well, so we don't need to worry about renewing tokens when they expire.
171-
:::
172168
173169
## Create an HTTP Interceptor
174170
@@ -246,9 +242,7 @@ import { InterceptorService } from './interceptor.service';
246242
247243
In the `providers` array, we're providing the `HTTP_INTERCEPTORS` injection token and our `InterceptorService` class. We then set `multi: true` because we could potentially use multiple interceptors (which would be called in the order provided).
248244
249-
::: note
250-
The interceptor will now run on every outgoing HTTP request. If you have public endpoints as well as protected endpoints, you could use conditional logic in the interceptor to only add the token to requests that require it.
251-
:::
245+
> The interceptor will now run on every outgoing HTTP request. If you have public endpoints as well as protected endpoints, you could use conditional logic in the interceptor to only add the token to requests that require it.
252246
253247
## Call the API
254248
@@ -331,9 +325,7 @@ export class ExternalApiComponent implements OnInit {
331325
332326
The API service is provided and a named subscription to `api.ping$()` is created. The act of subscribing fires off the HTTP call, which we'll do on a button click in the UI. When data comes back from the API, the results are set in a local property (`responseJson`).
333327
334-
:::note
335-
We do _not_ need to unsubscribe from the `api.ping$()` observable because it completes once the HTTP request is finished.
336-
:::
328+
> We do _not_ need to unsubscribe from the `api.ping$()` observable because it completes once the HTTP request is finished.
337329
338330
Open `src/app/external-api/external-api.component.html` and replace its contents with the following:
339331
@@ -374,8 +366,6 @@ Finally, add a link to the navigation bar. Open `src/app/nav-bar/nav-bar.compone
374366
</header>
375367
```
376368
377-
::: note
378-
If, at any time, the application isn't working as expected, the Angular CLI server may need to be restarted. Enter `Ctrl+C` in the terminal to stop the application, then run it again using `npm run dev`.
379-
:::
369+
> If, at any time, the application isn't working as expected, the Angular CLI server may need to be restarted. Enter `Ctrl+C` in the terminal to stop the application, then run it again using `npm run dev`.
380370
381371
> **Checkpoint:** You should now be able to log in, browse to the External API page, and click the **Ping API** button to make an API request. The response should then display in the browser.

0 commit comments

Comments
 (0)