Skip to content

Commit 316cda3

Browse files
Dickson-MwendiaDickson-Mwendia
authored
Merge pull request MicrosoftDocs#22 from MicrosoftDocs/msal-angular-docs
Add msal.js docs (Angular, Browser, Node, React)
2 parents cdc8851 + fbff4f2 commit 316cda3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+9286
-10
lines changed

‎.openpublishing.publish.config.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"ReferenceContainer": "Content"
2121
},
2222
"build_entry_point": "docs",
23-
"template_folder": "_themes"
23+
"template_folder": "_themes"
2424
},
2525
{
2626
"docset_name": "msal-javascript-conceptual",
@@ -57,8 +57,8 @@
5757
"TopLevelTOC": "msal/docs-ref-toc/fxtoc.yml",
5858
"ReferenceTOC": "msal/docs-ref-autogen/toc.yml",
5959
"ReferenceTOCUrl": "/javascript/api/microsoft-authentication-library-js/toc.json?view=msal-js-latest",
60-
"ConceptualTOCUrl": "/microsoft-authentication-library-js/toc.json",
61-
"OutputFolder": "msal/overview",
60+
"ConceptualTOC": "msal-javascript-conceptual/TOC.yml",
61+
"ConceptualTOCUrl": "/entra/msal/javascript/toc.json",
6262
"HideEmptyNode": false,
6363
"ContainerPageMetadata": {
6464
"langs": [

‎msal-javascript-conceptual/TOC.yml

Lines changed: 74 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,74 @@
1-
- name: Index
2-
href: index.md
1+
- name: Microsoft Authentication Library for JavaScript
2+
items:
3+
- name: Library overview
4+
href: overview.md
5+
- name: MSAL Browser
6+
items:
7+
- name: Getting started
8+
items:
9+
- name: Initialize applications
10+
href: browser/initialization.md
11+
- name: Configure your application
12+
href: browser/configuration.md
13+
- name: Acquire tokens
14+
items:
15+
- name: Sign in users
16+
href: browser/login-user.md
17+
- name: Acquire tokens
18+
href: browser/acquire-token.md
19+
- name: Manage token lifetimes
20+
href: browser/token-lifetimes.md
21+
- name: Sign out users
22+
href: browser/logout.md
23+
- name: Advanced topics
24+
items:
25+
- name: Logging in MSAL.js
26+
href: browser/logging.md
27+
- name: Handle errors and exceptions
28+
href: browser/errors.md
29+
- name: Acquiring SSH certificates
30+
href: browser/ssh-certificates.md
31+
- name: Use MSAL from Microsoft-hosted CDN
32+
href: browser/cdn-usage.md
33+
- name: Migration guides
34+
items:
35+
- name: Migrate apps from ADAL.js to MSAL.js
36+
href: browser/migrate-adal-js-to-msal-js.md
37+
- name: Migrate SPA from implicit to auth code flow
38+
href: browser/logout.md
39+
- name: Migrate from MSAL 1.x to MSAL 2.x
40+
href: browser/v1-migration.md
41+
- name: Migrate from MSAL 3.x to MSAL 3.x
42+
href: browser/v2-migration.md
43+
- name: MSAL Angular
44+
items:
45+
- name: Initialize MSAL
46+
href: angular/initialization.md
47+
- name: Configure your application
48+
href: angular/configuration.md
49+
- name: MSAL Node
50+
items:
51+
- name: Initialize public client applications
52+
href: node/initialize-public-client-application.md
53+
- name: Initialize confidential client applications
54+
href: node/initialize-confidential-client-application.md
55+
- name: Configure your application
56+
href: node/configuration.md
57+
- name: Supported authorization code grants
58+
href: node/request.md
59+
- name: MSAL React
60+
items:
61+
- name: Getting started with MSAL React
62+
href: react/getting-started.md
63+
- name: Class components
64+
href: react/class-components.md
65+
- name: Events
66+
href: react/events.md
67+
- name: Hooks
68+
href: react/hooks.md
69+
- name: Performance
70+
href: react/performance.md
71+
- name: Errors
72+
href: react/errors.md
73+
- name: Migrate from MSAL v1 to MSAL React and MSAL Browser
74+
href: react/migration-guide.md

‎msal-javascript-conceptual/angular/angular-universal.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: Angular Universal SSR with MSAL Angular
3+
description: Angular Universal SSR with MSAL Angular
4+
author: Dickson-Mwendia
5+
manager: CelesteDG
6+
7+
ms.topic: reference
8+
ms.date: 11/29/2023
9+
ms.author: emilylauber
10+
ms.reviewer: dmwendia,cwerner, owenrichards, kengaderdus
11+
---
12+
# Angular Universal SSR with MSAL Angular
13+
14+
Angular Universal is minimally supported in `@azure/msal-angular`. As `@azure/msal-angular` is a wrapper library for `@azure/msal-browser`, which uses browser-only global objects such as `window` and `___location` objects, not all of `@azure/msal-angular`'s features are available when using Angular Universal. While login and token acquisition is not supported server-side, Angular Universal can be used with `@azure/msal-angular` without breaking your app.
15+
16+
Please see instructions from the [Angular docs](https://angular.io/guide/universal) on how to install Angular Universal with an existing application, and for more information on [browser-only global objects](https://angular.io/guide/universal#working-around-the-browser-apis).
17+
18+
To use `@azure/msal-angular` with Angular Universal, make the following adjustments:
19+
20+
1. Remove references to browser-only objects. Our [Angular 15 sample app](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v3-samples/angular15-sample-app) has comments next to relevant lines that should be removed to render server-side. Removing these lines will not affect the sample app if using Angular Universal.
21+
22+
```ts
23+
this.isIframe = window !== window.parent && !window.opener; // Remove this line to use Angular Universal
24+
```
25+
26+
1. Alternatively, checks could be added before any lines that use browser-only global objects.
27+
28+
```ts
29+
if (typeof window !== "undefined") {
30+
this.isIframe = window !== window.parent && !window.opener;
31+
}
32+
```
33+
34+
1. The same check should be added to any HTTP calls made by your app, as the `MsalInterceptor` currently uses browser-only objects. This will be addressed in a future fix. See the example below in the *profile.component.ts* from our [older MSAL Angular v2 Angular 11 sample app](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/msal-lts/samples/msal-angular-v2-samples/angular11-sample-app):
35+
36+
```ts
37+
export class ProfileComponent implements OnInit {
38+
profile!: ProfileType;
39+
40+
constructor(
41+
private http: HttpClient
42+
) { }
43+
44+
ngOnInit() {
45+
// This check is added to ensure HTTP calls are made client-side
46+
if (typeof window !== "undefined") {
47+
this.getProfile();
48+
}
49+
}
50+
51+
getProfile() {
52+
this.http.get(GRAPH_ENDPOINT)
53+
.subscribe(profile => {
54+
this.profile = profile;
55+
});
56+
}
57+
}
58+
```
59+
60+
1. Ensure that your app is not using hash routing. The default routing strategy for the [older MSAL Angular v2 Angular 11 sample app](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/msal-lts/samples/msal-angular-v2-samples/angular11-sample-app) is hash routing, so ensure `useHash` is set to `false` in the *app-routing.module.ts*:
61+
62+
```ts
63+
@NgModule({
64+
imports: [RouterModule.forRoot(routes, {
65+
useHash: false,
66+
initialNavigation: 'enabled'
67+
})],
68+
exports: [RouterModule]
69+
})
70+
export class AppRoutingModule { }
71+
```

0 commit comments

Comments
 (0)