@fusionauth/angular-sdk 1.0.2 → 1.2.0

package/fesm2022/fusionauth-angular-sdk.mjs

@@ -1,57 +1,45 @@
-import { BehaviorSubject, Observable, catchError } from 'rxjs';
 import * as i0 from '@angular/core';
-import { Component, Input, NgModule } from '@angular/core';
+import { InjectionToken, PLATFORM_ID, Injectable, Inject, Component, Input, NgModule } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { BehaviorSubject, Observable, catchError } from 'rxjs';
 
-// @ts-nocheck
-const u = Object.defineProperty;
-const d = (r, e, t) => e in r
-    ? u(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t })
-    : (r[e] = t);
-const i = (r, e, t) => (d(r, typeof e != 'symbol' ? e + '' : e, t), t);
-class g {
-    constructor(e) {
-        i(this, 'serverUrl');
-        i(this, 'clientId');
-        i(this, 'redirectUri');
-        i(this, 'scope');
-        i(this, 'mePath');
-        i(this, 'loginPath');
-        i(this, 'registerPath');
-        i(this, 'logoutPath');
-        i(this, 'tokenRefreshPath');
-        (this.serverUrl = e.serverUrl),
-            (this.clientId = e.clientId),
-            (this.redirectUri = e.redirectUri),
-            (this.scope = e.scope),
-            (this.mePath = e.mePath ?? '/app/me'),
-            (this.loginPath = e.loginPath ?? '/app/login'),
-            (this.registerPath = e.registerPath ?? '/app/register'),
-            (this.logoutPath = e.logoutPath ?? '/app/logout'),
-            (this.tokenRefreshPath = e.tokenRefreshPath ?? '/app/refresh');
+/** A class responsible for generating URLs that FusionAuth SDKs interact with. */
+class UrlHelper {
+    constructor(config) {
+        this.serverUrl = config.serverUrl;
+        this.clientId = config.clientId;
+        this.redirectUri = config.redirectUri;
+        this.scope = config.scope;
+        this.postLogoutRedirectUri = config.postLogoutRedirectUri;
+        this.mePath = config.mePath ?? '/app/me/';
+        this.loginPath = config.loginPath ?? '/app/login/';
+        this.registerPath = config.registerPath ?? '/app/register/';
+        this.logoutPath = config.logoutPath ?? '/app/logout/';
+        this.tokenRefreshPath = config.tokenRefreshPath ?? '/app/refresh/';
     }
     getMeUrl() {
         return this.generateUrl(this.mePath);
     }
-    getLoginUrl(e) {
+    getLoginUrl(state) {
         return this.generateUrl(this.loginPath, {
             client_id: this.clientId,
             redirect_uri: this.redirectUri,
             scope: this.scope,
-            state: e,
+            state,
         });
     }
-    getRegisterUrl(e) {
+    getRegisterUrl(state) {
         return this.generateUrl(this.registerPath, {
             client_id: this.clientId,
             redirect_uri: this.redirectUri,
             scope: this.scope,
-            state: e,
+            state,
         });
     }
     getLogoutUrl() {
         return this.generateUrl(this.logoutPath, {
             client_id: this.clientId,
-            post_logout_redirect_uri: this.redirectUri,
+            post_logout_redirect_uri: this.postLogoutRedirectUri || this.redirectUri,
         });
     }
     getTokenRefreshUrl() {
@@ -59,175 +47,276 @@ class g {
             client_id: this.clientId,
         });
     }
-    generateUrl(e, t) {
-        const s = new URL(this.serverUrl);
-        if (((s.pathname = e), t)) {
-            const o = this.generateURLSearchParams(t);
-            s.search = o.toString();
+    getAccountManagementUrl() {
+        return this.generateUrl('/account/', {
+            client_id: this.clientId,
+        });
+    }
+    generateUrl(path, params) {
+        const url = new URL(this.serverUrl);
+        url.pathname = path;
+        if (params) {
+            const urlSearchParams = this.generateURLSearchParams(params);
+            url.search = urlSearchParams.toString();
         }
-        return s;
+        return url;
     }
-    generateURLSearchParams(e) {
-        const t = new URLSearchParams();
-        return (Object.entries(e).forEach(([s, o]) => {
-            o && t.append(s, o);
-        }),
-            t);
+    generateURLSearchParams(params) {
+        const urlSearchParams = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+            if (value) {
+                urlSearchParams.append(key, value);
+            }
+        });
+        return urlSearchParams;
     }
 }
-class p {
+
+/** A class responsible for storing a redirect value in localStorage and cleanup afterward. */
+class RedirectHelper {
     constructor() {
-        i(this, 'REDIRECT_VALUE', 'fa-sdk-redirect-value');
+        this.REDIRECT_VALUE = 'fa-sdk-redirect-value';
+    }
+    get storage() {
+        try {
+            return localStorage;
+        }
+        catch {
+            // fallback for non-browser environments where localStorage is not defined.
+            return {
+                /* eslint-disable */
+                setItem(_key, _value) { },
+                getItem(_key) { },
+                removeItem(_key) { },
+                /* eslint-enable */
+            };
+        }
     }
-    handlePreRedirect(e) {
-        const t = `${this.generateRandomString()}:${e ?? ''}`;
-        localStorage.setItem(this.REDIRECT_VALUE, t);
+    handlePreRedirect(state) {
+        const valueForStorage = `${this.generateRandomString()}:${state ?? ''}`;
+        this.storage.setItem(this.REDIRECT_VALUE, valueForStorage);
     }
-    handlePostRedirect(e) {
-        const t = this.stateValue ?? void 0;
-        e == null || e(t), localStorage.removeItem(this.REDIRECT_VALUE);
+    handlePostRedirect(callback) {
+        const stateValue = this.stateValue ?? undefined;
+        callback?.(stateValue);
+        this.storage.removeItem(this.REDIRECT_VALUE);
     }
     get didRedirect() {
-        return !!localStorage.getItem(this.REDIRECT_VALUE);
+        return Boolean(this.storage.getItem(this.REDIRECT_VALUE));
     }
     get stateValue() {
-        const e = localStorage.getItem(this.REDIRECT_VALUE);
-        if (!e)
+        const redirectValue = this.storage.getItem(this.REDIRECT_VALUE);
+        if (!redirectValue) {
             return null;
-        const [, ...t] = e.split(':');
-        return t.join(':');
+        }
+        const [, ...stateValue] = redirectValue.split(':');
+        return stateValue.join(':');
     }
     generateRandomString() {
-        const e = new Uint32Array(28);
-        return (window.crypto.getRandomValues(e),
-            Array.from(e, t => ('0' + t.toString(16)).substring(-2)).join(''));
+        const array = new Uint32Array(56 / 2);
+        window.crypto.getRandomValues(array);
+        return Array.from(array, (n) => ('0' + n.toString(16)).substring(-2)).join('');
     }
 }
-function m(r = 'app.at_exp') {
-    const e = document.cookie
+
+/**
+ * Gets the `app.at_exp` cookie and converts it to milliseconds since epoch.
+ * Returns -1 if the cookie is not present.
+ * @param cookieName - defaults to `app.at_exp`.
+ * @param adapter - SSR frameworks like Nuxt, Next, and angular/ssr will pass in an adapter.
+ */
+function getAccessTokenExpirationMoment(cookieName = 'app.at_exp', adapter) {
+    if (adapter) {
+        return toMilliseconds(adapter.at_exp(cookieName));
+    }
+    let cookie;
+    try {
+        // `document` throws a ReferenceError if this runs in a
+        // non-browser environment such as an SSR framework like Nuxt or Next.
+        cookie = document.cookie;
+    }
+    catch {
+        console.error('Error accessing cookies in fusionauth. If you are using SSR you must configure the SDK with a cookie adapter');
+        return -1;
+    }
+    const expCookie = cookie
         .split('; ')
-        .map(s => s.split('='))
-        .find(([s]) => s === r), t = e == null ? void 0 : e[1];
-    return t ? parseInt(t) * 1e3 : null;
+        .map(c => c.split('='))
+        .find(([name]) => name === cookieName);
+    const cookieValue = expCookie?.[1];
+    return toMilliseconds(cookieValue);
 }
-class U {
-    constructor(e) {
-        i(this, 'config');
-        i(this, 'urlHelper');
-        i(this, 'redirectHelper', new p());
-        i(this, 'tokenExpirationTimeout');
-        (this.config = e),
-            (this.urlHelper = new g({
-                serverUrl: e.serverUrl,
-                clientId: e.clientId,
-                redirectUri: e.redirectUri,
-                scope: e.scope,
-                mePath: e.mePath,
-                loginPath: e.loginPath,
-                registerPath: e.registerPath,
-                logoutPath: e.logoutPath,
-                tokenRefreshPath: e.tokenRefreshPath,
-            })),
-            this.scheduleTokenExpiration();
-    }
-    startLogin(e) {
-        this.redirectHelper.handlePreRedirect(e),
-            window.location.assign(this.urlHelper.getLoginUrl(e));
-    }
-    startRegister(e) {
-        this.redirectHelper.handlePreRedirect(e),
-            window.location.assign(this.urlHelper.getRegisterUrl(e));
+function toMilliseconds(seconds) {
+    if (!seconds)
+        return -1;
+    else
+        return Number(seconds) * 1000;
+}
+
+/** A class containing framework-agnostic SDK methods */
+class SDKCore {
+    constructor(config) {
+        this.redirectHelper = new RedirectHelper();
+        this.config = config;
+        this.urlHelper = new UrlHelper({
+            serverUrl: config.serverUrl,
+            clientId: config.clientId,
+            redirectUri: config.redirectUri,
+            scope: config.scope,
+            mePath: config.mePath,
+            loginPath: config.loginPath,
+            registerPath: config.registerPath,
+            logoutPath: config.logoutPath,
+            tokenRefreshPath: config.tokenRefreshPath,
+            postLogoutRedirectUri: config.postLogoutRedirectUri,
+        });
+        this.scheduleTokenExpiration();
+    }
+    startLogin(state) {
+        this.redirectHelper.handlePreRedirect(state);
+        window.location.assign(this.urlHelper.getLoginUrl(state));
+    }
+    startRegister(state) {
+        this.redirectHelper.handlePreRedirect(state);
+        window.location.assign(this.urlHelper.getRegisterUrl(state));
     }
     startLogout() {
         window.location.assign(this.urlHelper.getLogoutUrl());
     }
+    manageAccount() {
+        window.location.assign(this.urlHelper.getAccountManagementUrl());
+    }
     async fetchUserInfo() {
-        const e = await fetch(this.urlHelper.getMeUrl(), {
+        const userInfoResponse = await fetch(this.urlHelper.getMeUrl(), {
             credentials: 'include',
         });
-        if (!e.ok)
-            throw new Error(`Unable to fetch userInfo in fusionauth. Request failed with status code ${e == null ? void 0 : e.status}`);
-        return await e.json();
+        if (!userInfoResponse.ok) {
+            throw new Error(`Unable to fetch userInfo in fusionauth. Request failed with status code ${userInfoResponse?.status}`);
+        }
+        const userInfo = await userInfoResponse.json();
+        return userInfo;
     }
     async refreshToken() {
-        const e = await fetch(this.urlHelper.getTokenRefreshUrl(), {
+        const response = await fetch(this.urlHelper.getTokenRefreshUrl(), {
             method: 'POST',
             credentials: 'include',
             headers: {
                 'Content-Type': 'text/plain',
             },
         });
-        if (!(e.status >= 200 && e.status < 300)) {
-            const t = (await (e == null ? void 0 : e.text())) ||
+        if (!(response.status >= 200 && response.status < 300)) {
+            const message = (await response?.text()) ||
                 'Error refreshing access token in fusionauth';
-            throw new Error(t);
+            throw new Error(message);
         }
-        return this.scheduleTokenExpiration(), e;
+        // a successful request means that app_exp was bumped into the future.
+        // reschedule the access token expiration event.
+        this.scheduleTokenExpiration();
+        return response;
     }
     initAutoRefresh() {
-        const e = this.at_exp, t = this.config.autoRefreshSecondsBeforeExpiry ?? 10;
-        if (!e)
+        if (!this.isLoggedIn) {
             return;
-        const s = t * 1e3, o = /* @__PURE__ */ new Date().getTime(), h = e - s, l = Math.max(h - o, 0);
+        }
+        const secondsBeforeRefresh = this.config.autoRefreshSecondsBeforeExpiry ?? 10;
+        const millisecondsBeforeRefresh = secondsBeforeRefresh * 1000;
+        const now = new Date().getTime();
+        const refreshTime = this.at_exp - millisecondsBeforeRefresh;
+        const timeTillRefresh = Math.max(refreshTime - now, 0);
         return setTimeout(async () => {
-            let n, a;
             try {
-                await this.refreshToken(), this.initAutoRefresh();
+                await this.refreshToken();
+                this.initAutoRefresh();
             }
-            catch (c) {
-                (a = (n = this.config).onAutoRefreshFailure) == null || a.call(n, c);
+            catch (error) {
+                this.config.onAutoRefreshFailure?.(error);
             }
-        }, l);
+        }, timeTillRefresh);
     }
-    handlePostRedirect(e) {
-        this.isLoggedIn &&
-            this.redirectHelper.didRedirect &&
-            this.redirectHelper.handlePostRedirect(e);
+    handlePostRedirect(callback) {
+        if (this.isLoggedIn && this.redirectHelper.didRedirect) {
+            this.redirectHelper.handlePostRedirect(callback);
+        }
     }
     get isLoggedIn() {
-        return this.at_exp
-            ? this.at_exp > /* @__PURE__ */ new Date().getTime()
-            : !1;
+        return this.at_exp > new Date().getTime();
     }
     /** The moment of access token expiration in milliseconds since epoch. */
     get at_exp() {
-        return m(this.config.accessTokenExpireCookieName);
+        return getAccessTokenExpirationMoment(this.config.accessTokenExpireCookieName, this.config.cookieAdapter);
     }
-    /** Schedules `onTokenExpiration` at moment of access token expiration. */
+    /**
+     * Schedules `onTokenExpiration` at moment of access token expiration.
+     * SDKCore is not necessarily reactive like React, Angular, and Vue.
+     * so `onTokenExpiration` is for reactive frameworks to hook in and perform actions as on token expiration.
+     */
     scheduleTokenExpiration() {
         clearTimeout(this.tokenExpirationTimeout);
-        const e = this.at_exp ?? -1, t = /* @__PURE__ */ new Date().getTime(), s = e - t;
-        s > 0 &&
-            (this.tokenExpirationTimeout = setTimeout(this.config.onTokenExpiration, s));
+        const now = new Date().getTime();
+        const millisecondsTillExpiration = this.at_exp - now;
+        if (millisecondsTillExpiration > 0) {
+            this.tokenExpirationTimeout = setTimeout(this.config.onTokenExpiration, millisecondsTillExpiration);
+        }
     }
 }
-function P() {
-    const r = /* @__PURE__ */ new Date();
-    r.setHours(r.getHours() + 1);
-    const e = r.getTime() / 1e3;
-    document.cookie = `app.at_exp=${e}`;
+
+/** Sets `app.at_exp` moment cookie so the user will be logged in for 1 hour. */
+function mockIsLoggedIn() {
+    const expirationMoment = new Date();
+    expirationMoment.setHours(expirationMoment.getHours() + 1);
+    const oneHourInTheFutureInMilliseconds = expirationMoment.getTime() / 1000;
+    document.cookie = `app.at_exp=${oneHourInTheFutureInMilliseconds}`;
 }
-function f() {
-    document.cookie = 'app.at_exp=;expires=Thu, 01 Jan 1970 00:00:00 GMT';
+/** Removes the `app.at_exp` cookie. */
+function removeAt_expCookie() {
+    document.cookie = 'app.at_exp' + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT';
 }
-function w(r) {
-    const e = {
+
+function mockWindowLocation(vi) {
+    const mockedLocation = {
         ...window.location,
-        assign: r.fn(),
+        assign: vi.fn(),
     };
-    return r.spyOn(window, 'location', 'get').mockReturnValue(e), e;
+    vi.spyOn(window, 'location', 'get').mockReturnValue(mockedLocation);
+    return mockedLocation;
 }
 
+/** An adapter class that supports accessing cookies with SSR */
+class SSRCookieAdapter {
+    constructor(isBrowser) {
+        this.isBrowser = isBrowser;
+    }
+    at_exp(cookieName = 'app.at_exp') {
+        if (!this.isBrowser) {
+            return;
+        }
+        try {
+            const expCookie = document.cookie
+                .split('; ')
+                .map(c => c.split('='))
+                .find(([name]) => name === cookieName);
+            return expCookie?.[1];
+        }
+        catch (error) {
+            console.error('Error within the SSRCookieAdapter: ', error);
+            return -1;
+        }
+    }
+}
+
+const FUSIONAUTH_SERVICE_CONFIG = new InjectionToken('FUSIONAUTH_SERVICE_CONFIG');
+
 /**
  * Service class to use with FusionAuth backend endpoints.
  */
 class FusionAuthService {
-    constructor(config) {
-        this.core = new U({
+    constructor(config, platformId) {
+        this.core = new SDKCore({
             ...config,
             onTokenExpiration: () => {
                 this.isLoggedInSubject.next(false);
             },
+            cookieAdapter: new SSRCookieAdapter(isPlatformBrowser(platformId)),
         });
         this.isLoggedInSubject = new BehaviorSubject(this.core.isLoggedIn);
         this.isLoggedIn$ = this.isLoggedInSubject.asObservable();
@@ -305,7 +394,28 @@ class FusionAuthService {
     logout() {
         this.core.startLogout();
     }
+    /**
+     * Redirects to [self service account management](https://fusionauth.io/docs/lifecycle/manage-users/account-management/)
+     * Self service account management is only available in FusionAuth paid plans.
+     */
+    manageAccount() {
+        this.core.manageAccount();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthService, deps: [{ token: FUSIONAUTH_SERVICE_CONFIG }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FUSIONAUTH_SERVICE_CONFIG]
+                }] }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
 
 class FusionAuthLoginButtonComponent {
     constructor(fusionAuth) {
@@ -314,10 +424,10 @@ class FusionAuthLoginButtonComponent {
     login() {
         this.fusionAuth.startLogin(this.state);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthLoginButtonComponent, deps: [{ token: FusionAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FusionAuthLoginButtonComponent, selector: "fa-login", inputs: { state: "state" }, ngImport: i0, template: "<button class=\"fa-button\" (click)=\"login()\">\n  <span>Login</span>\n</button>\n", styles: [".fa-button{padding:16px 16px 13px;border-radius:8px;background-color:#083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:18px;font-weight:600;text-align:center;color:#fff;width:400px}.fa-button:hover{cursor:pointer}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthLoginButtonComponent, deps: [{ token: FusionAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FusionAuthLoginButtonComponent, selector: "fa-login", inputs: { state: "state" }, ngImport: i0, template: "<button class=\"fa-button\" (click)=\"login()\">\n  <span>Login</span>\n</button>\n", styles: [".fa-button{padding:16px 16px 13px;border-radius:8px;background-color:#083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:18px;font-weight:600;text-align:center;color:#fff;width:400px}.fa-button:hover{cursor:pointer}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthLoginButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthLoginButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fa-login', template: "<button class=\"fa-button\" (click)=\"login()\">\n  <span>Login</span>\n</button>\n", styles: [".fa-button{padding:16px 16px 13px;border-radius:8px;background-color:#083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:18px;font-weight:600;text-align:center;color:#fff;width:400px}.fa-button:hover{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: FusionAuthService }], propDecorators: { state: [{
@@ -331,10 +441,10 @@ class FusionAuthLogoutButtonComponent {
     logout() {
         this.fusionAuth.logout();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthLogoutButtonComponent, deps: [{ token: FusionAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FusionAuthLogoutButtonComponent, selector: "fa-logout", ngImport: i0, template: "<button class=\"fa-logout-button\" (click)=\"logout()\">\n  <span>logout</span>\n</button>\n", styles: [".fa-logout-button{padding:7px 13px;border-radius:3px;display:block;border:solid 1px #083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:12px;text-align:center;color:#083b94}.fa-logout-button:hover{cursor:pointer}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthLogoutButtonComponent, deps: [{ token: FusionAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FusionAuthLogoutButtonComponent, selector: "fa-logout", ngImport: i0, template: "<button class=\"fa-logout-button\" (click)=\"logout()\">\n  <span>logout</span>\n</button>\n", styles: [".fa-logout-button{padding:7px 13px;border-radius:3px;display:block;border:solid 1px #083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:12px;text-align:center;color:#083b94}.fa-logout-button:hover{cursor:pointer}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthLogoutButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthLogoutButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fa-logout', template: "<button class=\"fa-logout-button\" (click)=\"logout()\">\n  <span>logout</span>\n</button>\n", styles: [".fa-logout-button{padding:7px 13px;border-radius:3px;display:block;border:solid 1px #083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:12px;text-align:center;color:#083b94}.fa-logout-button:hover{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: FusionAuthService }] });
@@ -346,49 +456,66 @@ class FusionAuthRegisterButtonComponent {
     register() {
         this.fusionAuth.startRegistration(this.state);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthRegisterButtonComponent, deps: [{ token: FusionAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: FusionAuthRegisterButtonComponent, selector: "fa-register", inputs: { state: "state" }, ngImport: i0, template: "<button class=\"fa-button\" (click)=\"register()\">\n  <span>Register Now</span>\n</button>\n", styles: [".fa-button{padding:16px 16px 13px;border-radius:8px;background-color:#083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:18px;font-weight:600;text-align:center;color:#fff;width:400px}.fa-button:hover{cursor:pointer}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthRegisterButtonComponent, deps: [{ token: FusionAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FusionAuthRegisterButtonComponent, selector: "fa-register", inputs: { state: "state" }, ngImport: i0, template: "<button class=\"fa-button\" (click)=\"register()\">\n  <span>Register Now</span>\n</button>\n", styles: [".fa-button{padding:16px 16px 13px;border-radius:8px;background-color:#083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:18px;font-weight:600;text-align:center;color:#fff;width:400px}.fa-button:hover{cursor:pointer}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthRegisterButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthRegisterButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fa-register', template: "<button class=\"fa-button\" (click)=\"register()\">\n  <span>Register Now</span>\n</button>\n", styles: [".fa-button{padding:16px 16px 13px;border-radius:8px;background-color:#083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:18px;font-weight:600;text-align:center;color:#fff;width:400px}.fa-button:hover{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: FusionAuthService }], propDecorators: { state: [{
                 type: Input
             }] } });
 
+class FusionAuthAccountButtonComponent {
+    constructor(fusionAuth) {
+        this.fusionAuth = fusionAuth;
+    }
+    manageAccount() {
+        this.fusionAuth.manageAccount();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthAccountButtonComponent, deps: [{ token: FusionAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FusionAuthAccountButtonComponent, selector: "fa-account", ngImport: i0, template: "<button class=\"fa-button\" (click)=\"manageAccount()\">\n  <span>manage account</span>\n</button>\n", styles: [".fa-button{padding:16px 16px 13px;border-radius:8px;background-color:#083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:18px;font-weight:600;text-align:center;color:#fff;width:400px}.fa-button:hover{cursor:pointer}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthAccountButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fa-account', template: "<button class=\"fa-button\" (click)=\"manageAccount()\">\n  <span>manage account</span>\n</button>\n", styles: [".fa-button{padding:16px 16px 13px;border-radius:8px;background-color:#083b94;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol;font-size:18px;font-weight:600;text-align:center;color:#fff;width:400px}.fa-button:hover{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: FusionAuthService }] });
+
 class FusionAuthModule {
     static forRoot(fusionAuthConfig) {
         return {
             ngModule: FusionAuthModule,
             providers: [
-                {
-                    provide: FusionAuthService,
-                    useValue: new FusionAuthService(fusionAuthConfig),
-                },
+                { provide: FUSIONAUTH_SERVICE_CONFIG, useValue: fusionAuthConfig },
+                FusionAuthService,
             ],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthModule, declarations: [FusionAuthLoginButtonComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthModule, declarations: [FusionAuthLoginButtonComponent,
             FusionAuthLogoutButtonComponent,
-            FusionAuthRegisterButtonComponent], exports: [FusionAuthLoginButtonComponent,
+            FusionAuthRegisterButtonComponent,
+            FusionAuthAccountButtonComponent], exports: [FusionAuthLoginButtonComponent,
             FusionAuthLogoutButtonComponent,
-            FusionAuthRegisterButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthModule }); }
+            FusionAuthRegisterButtonComponent,
+            FusionAuthAccountButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: FusionAuthModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FusionAuthModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         FusionAuthLoginButtonComponent,
                         FusionAuthLogoutButtonComponent,
                         FusionAuthRegisterButtonComponent,
+                        FusionAuthAccountButtonComponent,
                     ],
                     imports: [],
                     exports: [
                         FusionAuthLoginButtonComponent,
                         FusionAuthLogoutButtonComponent,
                         FusionAuthRegisterButtonComponent,
+                        FusionAuthAccountButtonComponent,
                     ],
                 }]
         }] });
@@ -401,5 +528,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FusionAuthLoginButtonComponent, FusionAuthLogoutButtonComponent, FusionAuthModule, FusionAuthRegisterButtonComponent, FusionAuthService };
+export { FusionAuthAccountButtonComponent, FusionAuthLoginButtonComponent, FusionAuthLogoutButtonComponent, FusionAuthModule, FusionAuthRegisterButtonComponent, FusionAuthService };
 //# sourceMappingURL=fusionauth-angular-sdk.mjs.map