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
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.
166
164
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.
169
166
170
167
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
-
:::
172
168
173
169
## Create an HTTP Interceptor
174
170
@@ -246,9 +242,7 @@ import { InterceptorService } from './interceptor.service';
246
242
247
243
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).
248
244
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.
252
246
253
247
## Call the API
254
248
@@ -331,9 +325,7 @@ export class ExternalApiComponent implements OnInit {
331
325
332
326
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`).
333
327
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.
337
329
338
330
Open `src/app/external-api/external-api.component.html` and replace its contents with the following:
339
331
@@ -374,8 +366,6 @@ Finally, add a link to the navigation bar. Open `src/app/nav-bar/nav-bar.compone
374
366
</header>
375
367
```
376
368
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 `npmrundev`.
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 `npmrundev`.
380
370
381
371
> **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