Angular README and docs for v1.0

FusionAuth · May 6, 2024 · 2a4234c · 2a4234c
1 parent 53e4097
commit 2a4234c
Show file tree

Hide file tree

Showing 11 changed files with 879 additions and 57 deletions.
diff --git a/packages/sdk-angular/README.md b/packages/sdk-angular/README.md
@@ -6,9 +6,10 @@ An SDK for using FusionAuth in Angular applications.
 -   [Getting Started](#getting-started)
   -   [Installation](#installation)
 -   [Usage](#usage)
+  -   [FusionAuthService](#fusionauthservice)
   -   [Pre-built buttons](#pre-built-buttons)
-  -   [Service usage](#service-usage)
-  -   [Known issues](#known-issues)
+  -   [State Parameter](#state-parameter)
+-   [Known issues](#known-issues)
 -   [Quickstart](#quickstart)
 -   [Documentation](#documentation)
 -   [Releases](#releases)
@@ -25,9 +26,7 @@ Please also use ``` instead of indenting for code blocks. The backticks are tran
 tag::forDocSite[]
 -->
 
-This SDK allows you to add login, logout, and registration buttons to
-your Angular application. You can do this via pre-built buttons, or with 
-the FusionAuthService in your own components.
+This SDK helps manage authentication state for your Angular app and provides functionality to login, register, and logout users. It also can be configured to automatically manage your refresh token.
 
 Your users will be sent to FusionAuth’s themeable hosted login pages and
 then log in. After that, they are sent back to your Angular application.
@@ -87,6 +86,7 @@ import { FusionAuthModule } from '@fusionauth/angular-sdk';
       clientId: '', // Your FusionAuth client ID
       serverUrl: '', // The base URL of the server that performs the token exchange
       redirectUri: '', // The URI that the user is directed to after the login/register/logout action
+      shouldAutoRefresh: true // option to configure the SDK to automatically handle token refresh. Defaults to false if not specified here.
     }),
   ],
   providers: [],
@@ -97,6 +97,41 @@ export class AppModule { }
 
 ## Usage
 
+### FusionAuthService
+
+The injectable `FusionAuthService` class provides observable properties to which components may subscribe.
+
+Note, you can also use the non-observable `getUserInfo` method if you wish to implement your observables.
+
+```typescript
+class AppComponent implements OnInit, OnDestroy {
+  private fusionAuthService: FusionAuthService = inject(FusionAuthService);
+
+  isLoggedIn: boolean = this.fusionAuthService.isLoggedIn();
+  userInfo: UserInfo | null = null;
+  isGettingUserInfo: boolean = false;
+  subscription?: Subscription;
+
+  ngOnInit(): void {
+    if (this.isLoggedIn) {
+      this.subscription = this.fusionAuthService
+        .getUserInfoObservable({
+          onBegin: () => (this.isGettingUserInfo = true),
+          onDone: () => (this.isGettingUserInfo = false),
+        })
+        .subscribe({
+          next: (userInfo) => (this.userInfo = userInfo),
+          error: (error) => console.error(error),
+        });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
+}
+```
+
 ### Pre-built buttons
 
 There are three pre-styled buttons that are configured to perform
@@ -128,56 +163,6 @@ export class LogoutComponent {}
 export class RegisterComponent {}
 ```
 
-### Service usage
-
-Alternatively, you may interact with the SDK Service by injecting the FusionAuthService into any component or service.
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { FusionAuthService, UserInfo } from '@fusionauth/angular-sdk';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent implements OnInit {
-  private userInfo: UserInfo;
-
-  constructor(
-    private fusionAuth: FusionAuthService,
-  ) {}
-
-  async ngOnInit(): Promise<void> {
-    this.fusionAuth.initAutoRefresh();
-  }
-
-  login() {
-    this.fusionAuth.startLogin();
-  }
-
-  register() {
-    this.fusionAuth.startRegistration();
-  }
-
-  logout() {
-    this.fusionAuth.logout();
-  }
-
-  refreshToken() {
-    this.fusionAuth.refreshToken();
-  }
-
-  async getUserInfo() {
-    this.userInfo = await this.fusionAuth.getUserInfo();
-  }
-
-  isLoggedIn(): boolean {
-    return this.fusionAuth.isLoggedIn();
-  }
-}
-```
-
 #### State parameter
 
 The `startLogin` and `startRegistration` functions both accept an optional string
@@ -199,8 +184,7 @@ See the [FusionAuth Angular Quickstart](https://fusionauth.io/docs/quickstarts/q
 
 ## Documentation
 
-[Full library
-documentation](https://github.com/FusionAuth/fusionauth-angular-sdk/blob/main/docs/documentation.md)
+[Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-angular/docs)
 
 <!--
 end::forDocSite[]

diff --git a/packages/sdk-angular/docs/.nojekyll b/packages/sdk-angular/docs/.nojekyll
@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.
diff --git a/packages/sdk-angular/docs/README.md b/packages/sdk-angular/docs/README.md
@@ -0,0 +1,17 @@
+@fusionauth/angular-sdk / [Exports](modules.md)
+
+# FusionauthAngularSdk
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.0.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/packages/sdk-angular/docs/classes/FusionAuthLoginButtonComponent.md b/packages/sdk-angular/docs/classes/FusionAuthLoginButtonComponent.md
@@ -0,0 +1,72 @@
+[@fusionauth/angular-sdk](../README.md) / [Exports](../modules.md) / FusionAuthLoginButtonComponent
+
+# Class: FusionAuthLoginButtonComponent
+
+## Table of contents
+
+### Constructors
+
+- [constructor](FusionAuthLoginButtonComponent.md#constructor)
+
+### Properties
+
+- [fusionAuth](FusionAuthLoginButtonComponent.md#fusionauth)
+- [state](FusionAuthLoginButtonComponent.md#state)
+
+### Methods
+
+- [login](FusionAuthLoginButtonComponent.md#login)
+
+## Constructors
+
+### constructor
+
+• **new FusionAuthLoginButtonComponent**(`fusionAuth`): [`FusionAuthLoginButtonComponent`](FusionAuthLoginButtonComponent.md)
+
+#### Parameters
+
+| Name         | Type                                        |
+| :----------- | :------------------------------------------ |
+| `fusionAuth` | [`FusionAuthService`](FusionAuthService.md) |
+
+#### Returns
+
+[`FusionAuthLoginButtonComponent`](FusionAuthLoginButtonComponent.md)
+
+#### Defined in
+
+[lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts:12](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/53e4097ee736b5b67b1c6f60aea9b74238ada880/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts#L12)
+
+## Properties
+
+### fusionAuth
+
+• `Private` **fusionAuth**: [`FusionAuthService`](FusionAuthService.md)
+
+#### Defined in
+
+[lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts:12](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/53e4097ee736b5b67b1c6f60aea9b74238ada880/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts#L12)
+
+---
+
+### state
+
+• **state**: `undefined` \| `string`
+
+#### Defined in
+
+[lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts:10](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/53e4097ee736b5b67b1c6f60aea9b74238ada880/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts#L10)
+
+## Methods
+
+### login
+
+▸ **login**(): `void`
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts:14](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/53e4097ee736b5b67b1c6f60aea9b74238ada880/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts#L14)
diff --git a/packages/sdk-angular/docs/classes/FusionAuthLogoutButtonComponent.md b/packages/sdk-angular/docs/classes/FusionAuthLogoutButtonComponent.md
@@ -0,0 +1,61 @@
+[@fusionauth/angular-sdk](../README.md) / [Exports](../modules.md) / FusionAuthLogoutButtonComponent
+
+# Class: FusionAuthLogoutButtonComponent
+
+## Table of contents
+
+### Constructors
+
+- [constructor](FusionAuthLogoutButtonComponent.md#constructor)
+
+### Properties
+
+- [fusionAuth](FusionAuthLogoutButtonComponent.md#fusionauth)
+
+### Methods
+
+- [logout](FusionAuthLogoutButtonComponent.md#logout)
+
+## Constructors
+
+### constructor
+
+• **new FusionAuthLogoutButtonComponent**(`fusionAuth`): [`FusionAuthLogoutButtonComponent`](FusionAuthLogoutButtonComponent.md)
+
+#### Parameters
+
+| Name         | Type                                        |
+| :----------- | :------------------------------------------ |
+| `fusionAuth` | [`FusionAuthService`](FusionAuthService.md) |
+
+#### Returns
+
+[`FusionAuthLogoutButtonComponent`](FusionAuthLogoutButtonComponent.md)
+
+#### Defined in
+
+[lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts:10](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/53e4097ee736b5b67b1c6f60aea9b74238ada880/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts#L10)
+
+## Properties
+
+### fusionAuth
+
+• `Private` **fusionAuth**: [`FusionAuthService`](FusionAuthService.md)
+
+#### Defined in
+
+[lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts:10](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/53e4097ee736b5b67b1c6f60aea9b74238ada880/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts#L10)
+
+## Methods
+
+### logout
+
+▸ **logout**(): `void`
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts:12](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/53e4097ee736b5b67b1c6f60aea9b74238ada880/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts#L12)
diff --git a/packages/sdk-angular/docs/classes/FusionAuthModule.md b/packages/sdk-angular/docs/classes/FusionAuthModule.md
@@ -0,0 +1,43 @@
+[@fusionauth/angular-sdk](../README.md) / [Exports](../modules.md) / FusionAuthModule
+
+# Class: FusionAuthModule
+
+## Table of contents
+
+### Constructors
+
+- [constructor](FusionAuthModule.md#constructor)
+
+### Methods
+
+- [forRoot](FusionAuthModule.md#forroot)
+
+## Constructors
+
+### constructor
+
+• **new FusionAuthModule**(): [`FusionAuthModule`](FusionAuthModule.md)
+
+#### Returns
+
+[`FusionAuthModule`](FusionAuthModule.md)
+
+## Methods
+
+### forRoot
+
+▸ **forRoot**(`fusionAuthConfig`): `ModuleWithProviders`\<[`FusionAuthModule`](FusionAuthModule.md)\>
+
+#### Parameters
+
+| Name               | Type                                                    |
+| :----------------- | :------------------------------------------------------ |
+| `fusionAuthConfig` | [`FusionAuthConfig`](../interfaces/FusionAuthConfig.md) |
+
+#### Returns
+
+`ModuleWithProviders`\<[`FusionAuthModule`](FusionAuthModule.md)\>
+
+#### Defined in
+
+[lib/fusion-auth.module.ts:22](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/53e4097ee736b5b67b1c6f60aea9b74238ada880/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/fusion-auth.module.ts#L22)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.