### Install FusionAuth Vue SDK with NPM

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/README.md

Install the SDK using npm.

```bash
npm install @fusionauth/vue-sdk
```

--------------------------------

### Install FusionAuth Vue SDK with Yarn

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/README.md

Install the SDK using Yarn.

```bash
yarn add @fusionauth/vue-sdk
```

--------------------------------

### Install FusionAuth Angular SDK with NPM

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/README.md

Install the SDK using npm. This is the first step to integrate FusionAuth into your Angular application.

```bash
npm install @fusionauth/angular-sdk
```

--------------------------------

### Install FusionAuth React SDK with npm

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/README.md

Use this command to add the FusionAuth React SDK to your project using npm.

```bash
npm install @fusionauth/react-sdk
```

--------------------------------

### default (Plugin Installation)

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/docs/modules.md

The default export is an object with an `install` method, used for installing the FusionAuth Vue plugin. It accepts the Vue app instance and configuration options or a FusionAuth instance.

```APIDOC
## default (Plugin Installation)

### Description
Installation method for the FusionAuthVuePlugin.

### Parameters
#### Parameters
- **app** (App<any>) - The Vue app instance.
- **options** (FusionAuthConfig | FusionAuthInstantiated) - The configuration options for the plugin or an object containing a FusionAuth instance.

### Throws
Will throw an error if the required options are missing.
```

--------------------------------

### Run E2E Tests with Custom Server Command

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/README.md

Execute end-to-end tests by specifying the server start command and port number for the consuming application. Ensure Playwright is installed and the application is running separately.

```bash
SERVER_COMMAND="your-server-start-command" PORT=your-port-number yarn test:e2e
```

```bash
SERVER_COMMAND="npm run start" PORT=9011 yarn test:e2e
```

--------------------------------

### Install FusionAuth Angular SDK with Yarn

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/README.md

Install the SDK using Yarn. This is an alternative package manager for integrating FusionAuth into your Angular application.

```bash
yarn add @fusionauth/angular-sdk
```

--------------------------------

### Install FusionAuth React SDK with Yarn

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/README.md

Use this command to add the FusionAuth React SDK to your project using Yarn.

```bash
yarn add @fusionauth/react-sdk
```

--------------------------------

### Clean Yalc Installations and Reinstall Dependencies

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/README.md

If local changes are not being consumed as expected, this command sequence can help resolve issues. It removes all previous yalc installations and node_modules, then reinstalls dependencies and re-adds from yalc, providing a more consistent iteration process.

```bash
rm -rf node_modules && yalc remove --all
```

--------------------------------

### Using useFusionAuth Composable in Vue

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/README.md

Demonstrates how to import and use the `useFusionAuth` composable to manage login state, user info, and authentication actions within a Vue.js application's script setup.

```html
<script setup lang="ts">
import { computed } from 'vue';
import { useFusionAuth } from "@fusionauth/vue-sdk";

const {
  isLoggedIn,
  userInfo,
  isFetchingUserInfo,
  login,
  register,
  logout
} = useFusionAuth();

const welcomeMessage = computed(() => {
  const name = userInfo.value?.given_name
  return name 
    ? 'Welcome!'
    : `Welcome ${userInfo.value.given_name}!`;
});
</script>

<template>
  <p>{{ welcomeMessage }}</p>

  <div v-if="isLoggedIn">
    <p v-if="isFetchingUserInfo">
      Loading...
    </p>
    <button @click="logout()">Logout</button>
  </div>

  <div v-if="!isLoggedIn">
    <button @click="login()">Login</button>
    <p>or</p>
    <button @click="register()">Register</button>
  </div>
</template>
```

--------------------------------

### Configure FusionAuth Vue Plugin with createFusionAuth in Nuxt

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/README.md

An alternate Nuxt plugin setup using createFusionAuth for more flexible configuration.

```typescript
export default defineNuxtPlugin({
  setup(nuxtApp) {
    const fusionauth = createFusionAuth(config);   
    nuxtApp.vueApp.use(FusionAuthVuePlugin, { instance: fusionauth })
    return {
      provide: { fusionauth }
    };
  },
})
```

--------------------------------

### Nuxt.js Integration with Client-Side Auto-Refresh

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/README.md

Provides a Nuxt.js plugin setup to initialize the FusionAuth SDK and manually trigger auto-refresh in the `app:beforeMount` hook to avoid server-side rendering issues.

```typescript
defineNuxtPlugin({
  setup: (nuxtApp) => {
    const fusionauth = createFusionAuth({
      ...config,
      shouldAutoRefresh: false, // is false by default
    });   
    nuxtApp.vueApp.use(FusionAuthVuePlugin, { instance: fusionauth })
    return {
      provide: { fusionauth }
    };
  },
  hooks: {
    "app:beforeMount"() {
      const { $fusionauth } = useNuxtApp();
      $fusionauth.initAutoRefresh();
    },
  }
})
```

--------------------------------

### FusionAuthLoginButton

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/modules/ui_FusionAuthLoginButton.md

A React component that renders a button to initiate the FusionAuth login flow. It utilizes the FusionAuthProviderContext to start the login process.

```APIDOC
## FusionAuthLoginButton

### Description

This function is a React component that renders a button. When clicked, it calls the `startLogin` method provided by the `FusionAuthProviderContext` to initiate the FusionAuth login flow.

### Parameters

- `props` (FusionAuthLoginButtonProps) - Required - Props for the FusionAuthLoginButton component.
- `deprecatedLegacyContext?` (any) - Optional - Deprecated legacy context. Refer to React documentation for details.

### Returns

`ReactNode` - A React node representing the button.

### Defined in

`packages/sdk-react/src/components/ui/FusionAuthLoginButton/index.tsx:16`
```

--------------------------------

### Configure FusionAuth Provider in React App

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/README.md

Wrap your React application with FusionAuthProvider and configure it with your FusionAuth instance details. This setup enables automatic token refresh and user info fetching if desired.

```jsx
import ReactDOM from 'react-dom/client';
import { FusionAuthProviderConfig, FusionAuthProvider } from '@fusionauth/react-sdk';

const config: FusionAuthProviderConfig = {
  clientId: "", // Your app's FusionAuth client id
  redirectUri: "", // The URI that the user is directed to after the login/register/logout action
  serverUrl: "", // The url of the server that performs the token exchange
  shouldAutoFetchUserInfo: true, // Automatically fetch userInfo when logged in. Defaults to false.
  shouldAutoRefresh: true, // Enables automatic token refresh. Defaults to false.
  onRedirect: (state?: string) => { }, // Optional callback invoked upon redirect back from login or register.
};

ReactDOM.createRoot(document.getElementById("my-app")).render(
  <FusionAuthProvider {...config}> 
    <App /> 
  </FusionAuthProvider>
)
```

--------------------------------

### Configure FusionAuthModule in Angular

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/README.md

Configure the FusionAuthModule by providing your FusionAuth client ID, server URL, redirect URI, and token auto-refresh settings. This setup is essential for the SDK to function correctly.

```typescript
import {
  NgModule
} from '@angular/core';
import {
  BrowserModule
} from '@angular/platform-browser';

import {
  AppRoutingModule
} from './app-routing.module';
import {
  FusionAuthModule
} from '@fusionauth/angular-sdk';

@NgModule({
  declarations: [],
  imports: [
    FusionAuthModule.forRoot({
      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: [],
  bootstrap: []
})
export class AppModule { }
```

--------------------------------

### initAutoRefresh

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/CHANGES.md

Initializes the automatic token refresh mechanism. This function should be called to start the process of periodically checking and refreshing tokens before they expire. It utilizes a configured interval based on `autoRefreshSecondsBeforeExpiry`.

```APIDOC
## initAutoRefresh

### Description
Initializes the automatic token refresh mechanism. This function should be called to start the process of periodically checking and refreshing tokens before they expire. It utilizes a configured interval based on `autoRefreshSecondsBeforeExpiry`.

### Method
```typescript
initAutoRefresh: () => NodeJS.Timeout | undefined;
```

### Returns
- `NodeJS.Timeout | undefined`: Returns a timeout object if auto-refresh is successfully started, otherwise undefined.
```

--------------------------------

### startRegistration

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthService.md

Initiates the user registration flow. An optional state parameter can be provided to be echoed back upon redirection.

```APIDOC
## startRegistration

### Description
Initiates register flow.

### Parameters
#### Parameters
- **state** (`string`) - Optional value to be echoed back to the SDK upon redirect.

### Returns
`void`
```

--------------------------------

### Using Pre-built FusionAuth Buttons

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/README.md

Shows how to include and customize pre-styled buttons for login, logout, and registration provided by the SDK.

```html
<template>
  <FusionAuthLoginButton />
  <FusionAuthLogoutButton />
  <FusionAuthRegisterButton />
</template>

<style>
  :root {
    --fusionauth-button-background-color: #096324;
    --fusionauth-button-text-color: #fff;
  }
</style>
```

--------------------------------

### startLogin

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthService.md

Initiates the user login flow. An optional state parameter can be provided to be echoed back upon redirection.

```APIDOC
## startLogin

### Description
Initiates login flow.

### Parameters
#### Parameters
- **state** (`string`) - Optional value to be echoed back to the SDK upon redirect.

### Returns
`void`
```

--------------------------------

### startRegister

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/interfaces/providers_FusionAuthProviderContext.FusionAuthProviderContext.md

Initiates the registration flow. This method redirects the user to the FusionAuth registration page. An optional state parameter can be provided to be echoed back upon successful registration.

```APIDOC
## startRegister

### Description
Initiates the registration flow. This method redirects the user to the FusionAuth registration page. An optional state parameter can be provided to be echoed back upon successful registration.

### Method Signature
`startRegister(state?: string): void`

### Parameters
#### state
- **state** (`string`) - Optional. A value to be echoed back to the SDK upon redirect.
```

--------------------------------

### constructor

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthService.md

Initializes a new instance of the FusionAuthService class. It requires configuration details and a platform identifier.

```APIDOC
## constructor

### Description
Initializes a new instance of the FusionAuthService class.

### Parameters
- **config** (FusionAuthConfig) - Configuration object for the FusionAuth SDK.
- **platformId** (Object) - Identifier for the platform.

### Returns
- FusionAuthService<T> - An instance of the FusionAuthService.
```

--------------------------------

### startRegistration

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthService.md

Initiates the registration process for a new user. This method usually redirects the user to the FusionAuth registration page.

```APIDOC
## startRegistration

### Description
Initiates the registration process for a new user.

### Returns
- Promise<void> - A promise that resolves when the registration process is initiated.
```

--------------------------------

### Use FusionAuthService in Angular Component

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/README.md

Inject and use the FusionAuthService in your Angular component to manage authentication state. Subscribe to `getUserInfoObservable` to get user information and handle loading states.

```typescript
import {
  Component,
  OnInit,
  OnDestroy,
  inject
} from '@angular/core';
import {
  Subscription
} from 'rxjs';
import {
  FusionAuthService,
  UserInfo
} from '@fusionauth/angular-sdk';

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();
  }
}
```

--------------------------------

### startLogin

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthService.md

Initiates the login process for a user. This method typically redirects the user to the FusionAuth login page or initiates an OAuth flow.

```APIDOC
## startLogin

### Description
Initiates the login process for a user.

### Parameters
- **loginId** (string) - The login identifier for the user.

### Returns
- Promise<void> - A promise that resolves when the login process is initiated.
```

--------------------------------

### Build and Publish Angular SDK Locally with Yalc

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/README.md

Use this script to build the Angular SDK and publish it to your local yalc store for consumption in other projects. This is part of the development workflow for testing local changes.

```bash
yarn yalc-pub:sdk-angular
```

--------------------------------

### startLogin

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/interfaces/providers_FusionAuthProviderContext.FusionAuthProviderContext.md

Initiates the login flow. This method redirects the user to the FusionAuth login page. An optional state parameter can be provided to be echoed back upon successful authentication.

```APIDOC
## startLogin

### Description
Initiates the login flow. This method redirects the user to the FusionAuth login page. An optional state parameter can be provided to be echoed back upon successful authentication.

### Method Signature
`startLogin(state?: string): void`

### Parameters
#### state
- **state** (`string`) - Optional. A value to be echoed back to the SDK upon redirect.
```

--------------------------------

### FusionAuthModule Constructor

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthModule.md

Initializes a new instance of the FusionAuthModule.

```APIDOC
## constructor

### Description

Initializes a new instance of the FusionAuthModule.

### Returns

- `FusionAuthModule`: An instance of the FusionAuthModule.
```

--------------------------------

### Configure and Initialize FusionAuth Vue Plugin

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/README.md

Configure and initialize the FusionAuthVuePlugin when creating your Vue app. Ensure all configuration values are correctly set for your FusionAuth instance.

```typescript
import { createApp } from 'vue';
import FusionAuthVuePlugin, { type FusionAuthConfig } from '@fusionauth/vue-sdk';

const config: FusionAuthConfig = {
  clientId: "", // Your app's FusionAuth client id
  serverUrl: "", // The url of the server that performs the token exchange
  redirectUri: "", // The URI that the user is directed to after the login/register/logout action
  shouldAutoFetchUserInfo: true, // Automatically fetch userInfo when logged in. Defaults to false.
  shouldAutoRefresh: true, // Enables automatic token refresh. Defaults to false.
  onRedirect: (state?: string) => { }, // Optional callback invoked upon redirect back from login or register.
}

const app = createApp(App);

app.use(FusionAuthVuePlugin, config);
app.mount('#app')
```

--------------------------------

### Configure FusionAuth Provider with Next.js

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/README.md

Integrate the FusionAuth React SDK with Next.js by using `next-client-cookies` and passing the `useCookies` function as `nextCookieAdapter` to the `FusionAuthProvider`. Ensure your layout is wrapped with `CookiesProvider`.

```jsx
'use client'

import { useCookies } from 'next-client-cookies';

export default function Providers({ children }) {
  return (
    <FusionAuthProvider {...config} nextCookieAdapter={useCookies}>
      {children}
    </FusionAuthProvider>
  );
}
```

--------------------------------

### Configure FusionAuth Vue Plugin

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/generated/README.adoc

Initialize the FusionAuthVuePlugin in your Vue application's entry point. Ensure you replace the placeholder values with your actual FusionAuth configuration.

```typescript
const app = createApp(App)

app.use(FusionAuthVuePlugin, {
  clientId: '',
  serverUrl: '',
  redirectUri: '',
});

app.mount('#app')
```

--------------------------------

### FusionAuthModule.forRoot

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthModule.md

Configures the FusionAuthModule with the provided configuration object.

```APIDOC
## forRoot

▸ **forRoot**(`fusionAuthConfig`): `ModuleWithProviders`

### Description

Configures the FusionAuthModule with the provided configuration object. This method should be called in the `AppModule` or a feature module's `forRoot` static method.

### Parameters

- **`fusionAuthConfig`** (`FusionAuthConfig`): The configuration object for FusionAuth.

### Returns

- `ModuleWithProviders<FusionAuthModule>`: A `ModuleWithProviders` object containing the `FusionAuthModule` and its dependencies.
```

--------------------------------

### Import FusionAuth Vue SDK CSS

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/README.md

Import the SDK's CSS file if you plan to use the pre-styled buttons.

```typescript
import '@fusionauth/vue-sdk/dist/style.css';
```

--------------------------------

### startLogout

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/interfaces/providers_FusionAuthProviderContext.FusionAuthProviderContext.md

Initiates the logout flow. This method redirects the user to the FusionAuth logout endpoint, effectively ending their session.

```APIDOC
## startLogout

### Description
Initiates the logout flow. This method redirects the user to the FusionAuth logout endpoint, effectively ending their session.

### Method Signature
`startLogout(): void`

### Parameters
None
```

--------------------------------

### Configure FusionAuth Provider in React

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/README.md

Wrap your application with FusionAuthProvider and configure it with your FusionAuth instance details. Ensure all required configuration properties are provided.

```jsx
import ReactDOM from 'react-dom/client';
import { FusionAuthProviderConfig, FusionAuthProvider } from '@fusionauth/react-sdk';

const config: FusionAuthProviderConfig = {
  clientId: "", // Your app's FusionAuth client id
  redirectUri: "", // The URI that the user is directed to after the login/register/logout action
  serverUrl: "", // The url of the server that performs the token exchange
  shouldAutoFetchUserInfo: true, // Automatically fetch userInfo when logged in. Defaults to false.
  shouldAutoRefresh: true, // Enables automatic token refresh. Defaults to false.
  onRedirect: (state?: string) => { }, // Optional callback invoked upon redirect back from login or register.
};

ReactDOM.createRoot(document.getElementById("my-app")).render(
  <FusionAuthProvider {...config}>
    <App />
  </FusionAuthProvider>
)
```

--------------------------------

### FusionAuthLoginButtonComponent.login Method

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthLoginButtonComponent.md

Initiates the login process. This method is responsible for triggering the authentication flow.

```APIDOC
## Method

### login(): void

This method initiates the login process. It does not return any value.
```

--------------------------------

### Add Local Angular SDK Package with Yalc

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/README.md

After publishing a local build of the Angular SDK using yalc, use this command within your consuming application's directory to add the local package. This allows you to test your SDK changes in a real application.

```bash
yalc add @fusionauth/angular-sdk
```

--------------------------------

### Protecting Content with RequireAuth and RequireAnonymous

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/README.md

Illustrates how to use `RequireAuth` and `RequireAnonymous` components to conditionally render content based on user authentication status and roles.

```html
<template>
  <RequireAuth :with-role="['ADMIN', 'SUPER-ADMIN']">
    <!-- only displays for users with specifed role -->
    <button>Delete user</button>
  </RequireAuth>
</template>

<template>
  <RequireAnonymous>
    <!-- content for unauthenticated users -->
  </RequireAnonymous>
</template>
```

--------------------------------

### Protecting Content with RequireAuth and RequireAnonymous

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/docs/README.md

Illustrates how to use `RequireAuth` and `RequireAnonymous` components to conditionally render content based on user authentication status and roles.

```html
<template>
  <RequireAuth :with-role="['ADMIN', 'SUPER-ADMIN']">
    <!-- only displays for users with specifed role -->
    <button>Delete user</button>
  </RequireAuth>
</template>
```

```html
<template>
  <RequireAnonymous>
    <!-- content for unauthenticated users -->
  </RequireAnonymous>
</template>
```

--------------------------------

### FusionAuthLoginButtonComponent Constructor

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthLoginButtonComponent.md

Initializes a new instance of the FusionAuthLoginButtonComponent. It requires an instance of FusionAuthService for handling authentication operations.

```APIDOC
## Constructor

### new FusionAuthLoginButtonComponent(fusionAuth: FusionAuthService<UserInfo>)

#### Parameters

- **fusionAuth** (FusionAuthService<UserInfo>) - The FusionAuth service instance to be used for authentication.

#### Returns

FusionAuthLoginButtonComponent
```

--------------------------------

### logout

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthService.md

Initiates the user logout process. This method does not return any value.

```APIDOC
## logout

### Description
Initiates logout flow.

### Returns
`void`
```

--------------------------------

### FusionAuthRegisterButton

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/modules/ui_FusionAuthRegisterButton.md

A React component that renders a button to initiate the registration process. It utilizes the `startRegister` method from the `FusionAuthProviderContext`.

```APIDOC
## FusionAuthRegisterButton

### Description

Renders a button that triggers the user registration flow by calling the `startRegister` method from the `FusionAuthProviderContext`.

### Parameters

#### Props

- **props** (`FusionAuthRegisterButtonProps`) - Required - Properties for the button component.
- **deprecatedLegacyContext?** (`any`) - Optional - Deprecated legacy context.

### Returns

- `ReactNode` - The rendered React node for the button.
```

--------------------------------

### createFusionAuth

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/docs/modules.md

Creates an instance of the FusionAuth client with the provided configuration. This function is generic and can be typed with a UserInfo interface.

```APIDOC
## createFusionAuth<T>

### Description
Creates an instance of the FusionAuth client with the provided configuration.

### Parameters
#### Parameters
- **config** (FusionAuthConfig) - The configuration object for FusionAuth.

### Returns
- FusionAuth<T> - An instance of the FusionAuth client.

### Type Parameters
- **T** - Represents the UserInfo type, defaulting to UserInfo.
```

--------------------------------

### Custom User Info Typing in Angular SDK

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/CHANGES.md

Demonstrates how to use a generic argument to custom type `userInfo` for non-hosted backends. This allows for special properties to be accessed directly.

```typescript
interface MyUserInfo {
  specialProperty: string;
  // ...etc
}

@Component({
  template: ` <p>{{ userInfo?.specialProperty }}</p> `,
})
class AppComponent implements OnInit {
  private fusionauth: FusionAuthService<MyUserInfo> =
    inject(FusionAuthService);
  userInfo: MyUserInfo | null = null;

  ngOnInit() {
    this.subscription = this.fusionauth.getUserInfoObservable().subscribe({
      next: userInfo => (this.userInfo = userInfo),
    });
  }
}
```

--------------------------------

### FusionAuthRegisterButtonComponent Constructor

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthRegisterButtonComponent.md

Initializes a new instance of the FusionAuthRegisterButtonComponent. It requires an instance of FusionAuthService to manage authentication operations.

```APIDOC
## Constructor

### new FusionAuthRegisterButtonComponent(fusionAuth: FusionAuthService<UserInfo>)

#### Parameters

- **fusionAuth** (FusionAuthService<UserInfo>) - The FusionAuthService instance to be used by the component.

#### Returns

- FusionAuthRegisterButtonComponent - A new instance of the component.
```

--------------------------------

### FusionAuthLogoutButtonComponent Constructor

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthLogoutButtonComponent.md

Initializes a new instance of the FusionAuthLogoutButtonComponent. It requires an instance of FusionAuthService for managing authentication operations.

```APIDOC
## Constructor

### new FusionAuthLogoutButtonComponent(fusionAuth: FusionAuthService<UserInfo>)

Initializes a new instance of the `FusionAuthLogoutButtonComponent` class.

#### Parameters

* `fusionAuth` (FusionAuthService<UserInfo>) - The FusionAuthService instance to be used by the component.
```

--------------------------------

### Custom User Info Typing in React SDK

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/CHANGES.md

Demonstrates how to provide a custom type for user information using a generic argument with the `useFusionAuth` hook. This is useful for SDK users with non-hosted backends.

```typescript
interface MyUserInfo {
  specialProperty: string;
  // ...etc
}
const { userInfo } = useFusionAuth<MyUserInfo>();
userInfo.specialProperty;
```

--------------------------------

### Use Pre-built FusionAuth Buttons

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/generated/README.adoc

Integrate the pre-styled login, logout, and registration buttons directly into your Vue templates. Customization is possible using CSS variables.

```vue
<template>
  <FusionAuthLoginButton/>
  <FusionAuthLogoutButton/>
  <FusionAuthRegisterButton/>
</template>

<style>
  :root {
    --fusionauth-button-background-color: #096324;
    --fusionauth-button-text-color: #fff;
  }
</style>
```

--------------------------------

### Pre-built Angular Components for FusionAuth

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/README.md

Use these pre-styled Angular components for login, logout, and registration flows. Place them directly in your application's templates.

```typescript
import {
  Component
} from '@angular/core';

@Component({
  selector: 'app-login',
  template: `<fa-login></fa-login>`,
  styleUrls: []
})
export class LoginComponent {}

@Component({
  selector: 'app-logout',
  template: `<fa-logout></fa-logout>`,
  styleUrls: []
})
export class LogoutComponent {}

@Component({
  selector: 'app-register',
  template: `<fa-register></fa-register>`,
  styleUrls: []
})
export class RegisterComponent {}

```

--------------------------------

### userInfo

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/interfaces/providers_FusionAuthProviderContext.FusionAuthProviderContext.md

Contains the user information fetched from the configured 'me' endpoint. This property will be null if the user is not authenticated or if the data has not yet been fetched.

```APIDOC
## userInfo

### Description
Contains the user information fetched from the configured 'me' endpoint. This property will be null if the user is not authenticated or if the data has not yet been fetched.

### Type
`null` or `T` (where `T` represents the user data type)
```

--------------------------------

### FusionAuth SDK Configuration Interface

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/CHANGES.md

Defines the configuration options for the FusionAuth SDK, including server URL, client ID, redirect URI, and various feature flags for authentication and token management.

```typescript
interface FusionAuthConfig {
  /**
   * The URL of the FusionAuth server.
   */
  serverUrl: string;
  /**
   * The client id of the application.
   */
  clientId: string;
  /**
   * The redirect URI of the application.
   */
  redirectUri: string;
  /**
   * The OAuth2 scope parameter passed to the `/oauth2/authorize` endpoint. Fusionauth will default this to `openid offline_access` if not specified.
   */
  scope?: string;
  /**
   * Enables automatic token refreshing. Defaults to false.
   */
  shouldAutoRefresh?: boolean;
  /**
   * Enables the SDK to automatically handle fetching user info when logged in. Defaults to false.
   */
  shouldAutoFetchUserInfo?: boolean;
  /**
   * The number of seconds before the access token expiry when the auto refresh functionality kicks in if enabled. Default is 30.
   */
  autoRefreshSecondsBeforeExpiry?: number;
  /**
   * Callback function to be invoked with the `state` value upon redirect from login or register.
   */
  onRedirect?: (state?: string) => void;
  /**
   * The path to the login endpoint.
   */
  loginPath?: string;
  /**
   * The path to the logout endpoint.
   */
  logoutPath?: string;
  /**
   * The path to the register endpoint.
   */
  registerPath?: string;
  /**
   * The path to the token refresh endpoint.
   */
  tokenRefreshPath?: string;
  /**
   * The path to the me endpoint.
   */
  mePath?: string;
}
```

--------------------------------

### FusionAuthAccountButtonComponent Constructor

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthAccountButtonComponent.md

Initializes a new instance of the FusionAuthAccountButtonComponent. It requires an instance of FusionAuthService to manage authentication and user-related operations.

```APIDOC
## Constructor

### `new FusionAuthAccountButtonComponent(fusionAuth: FusionAuthService<UserInfo>)`

#### Parameters

*   **fusionAuth** (`FusionAuthService<UserInfo>`): An instance of the FusionAuthService used for authentication and user management.

#### Returns

*   `FusionAuthAccountButtonComponent`: A new instance of the component.
```

--------------------------------

### FusionAuthRegisterButtonComponent.register Method

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthRegisterButtonComponent.md

Initiates the user registration process. This method is called to trigger the registration flow, typically by user interaction with the component's UI.

```APIDOC
## Method

### register(): void

#### Description

Initiates the user registration process.

#### Returns

- void
```

--------------------------------

### UserInfo Interface Properties

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/interfaces/UserInfo.md

This snippet details the properties available within the UserInfo interface. All properties are optional.

```APIDOC
## Interface: UserInfo

### Properties

- **applicationId** (string) - Optional
- **birthdate** (string) - Optional
- **email** (string) - Optional
- **email_verified** (boolean) - Optional
- **family_name** (string) - Optional
- **given_name** (string) - Optional
- **middle_name** (string) - Optional
- **name** (string) - Optional
- **phone_number** (string) - Optional
- **picture** (string) - Optional
- **preferred_username** (string) - Optional
- **roles** (any[]) - Optional
- **sid** (string) - Optional
- **sub** (string) - Optional
- **tid** (string) - Optional
```

--------------------------------

### initAutoRefresh

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthService.md

Initializes the automatic access token refreshing mechanism. This is typically handled automatically if the SDK is configured with the `shouldAutoRefresh` option.

```APIDOC
## initAutoRefresh

### Description
Initializes automatic access token refreshing.
This is handled automatically if the SDK is configured with `shouldAutoRefresh`.

### Returns
- void
```

--------------------------------

### UserInfo Properties

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/docs/interfaces/UserInfo.md

This snippet outlines the properties available within the UserInfo interface. Each property represents a piece of user data that can be accessed.

```APIDOC
## Interface: UserInfo

User information returned from FusionAuth.

### Properties

- **applicationId** (string, Optional)
- **birthdate** (string, Optional)
- **email** (string, Optional)
- **email_verified** (boolean, Optional)
- **family_name** (string, Optional)
- **given_name** (string, Optional)
- **middle_name** (string, Optional)
- **name** (string, Optional)
- **phone_number** (string, Optional)
- **picture** (string, Optional)
- **preferred_username** (string, Optional)
- **roles** (any[], Optional)
- **sid** (string, Optional)
- **sub** (string, Optional)
- **tid** (string, Optional)

#### Defined in

[src/types.ts:88](https://github.com/FusionAuth/fusionauth-javascript-sdk/blob/02b46e2174ba0f4804f6b5ef004ac88414902cc3/packages/sdk-vue/src/types.ts#L88)

---
```

--------------------------------

### manageAccount

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthService.md

Initiates the process for the user to manage their account. This often involves redirecting the user to a specific FusionAuth page for profile updates.

```APIDOC
## manageAccount

### Description
Initiates the process for the user to manage their account.

### Returns
- Promise<void> - A promise that resolves when the account management process is initiated.
```

--------------------------------

### Integrate FusionAuth UI Buttons in React

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/README.md

Utilize pre-built `FusionAuthLoginButton`, `FusionAuthLogoutButton`, and `FusionAuthRegisterButton` components for common authentication flows.

```jsx
import {
  FusionAuthLoginButton,
  FusionAuthLogoutButton,
  FusionAuthRegisterButton
} from '@fusionauth/react-sdk';

export const LoginPage = () => (
  <>
    <h1>Welcome, please log in or register</h1>
    <FusionAuthLoginButton />
    <FusionAuthRegisterButton />
  </>
);

export const AccountPage = () => (
  <>
    <h1>Hello, user!</h1>
    <FusionAuthLogoutButton />
  </>
);
```

--------------------------------

### getUserInfo

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthService.md

Fetches the current user's information from the 'me' endpoint. This method returns a Promise that resolves with the user's info.

```APIDOC
## getUserInfo

### Description
Fetches userInfo from the 'me' endpoint.

### Returns
- Promise<T> - A promise that resolves with the user's information.

### Throws
- If an error occurred while fetching.
```

--------------------------------

### FusionAuthProviderConfig Properties

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/interfaces/providers_FusionAuthProviderConfig.FusionAuthProviderConfig.md

Configuration options for the FusionAuth authentication provider.

```APIDOC
## FusionAuthProviderConfig Properties

### serverUrl

• **serverUrl**: `string`

The URL of the server that performs the token exchange.

### redirectUri

• **redirectUri**: `string`

The redirect URI of the application.

### scope

• `Optional` **scope**: `string`

The OAuth2 scope parameter passed to the `/oauth2/authorize` endpoint. If not specified fusionauth will default this to `openid offline_access`.

### postLogoutRedirectUri

• `Optional` **postLogoutRedirectUri**: `string`

The redirect URI for post-logout. Defaults the provided `redirectUri`.

### shouldAutoRefresh

• `Optional` **shouldAutoRefresh**: `boolean`

Enables automatic token refreshing. Defaults to false.

### onAutoRefreshFailure

• `Optional` **onAutoRefreshFailure**: (`error`: `Error`) => `void`

Callback to be invoked if a request to refresh the access token fails during autorefresh.

### onRedirect

• `Optional` **onRedirect**: (`state?`: `string`) => `void`

Callback function to be invoked with the `state` value upon redirect from login or register.

### registerPath

• `Optional` **registerPath**: `string`

The path to the register endpoint.

### tokenRefreshPath

• `Optional` **tokenRefreshPath**: `string`

The path to the token refresh endpoint.

### shouldAutoFetchUserInfo

• `Optional` **shouldAutoFetchUserInfo**: `boolean`

Enables the SDK to automatically handle fetching user info when logged in. Defaults to false.

### Cookies

▸ (): `Cookies`

Returns `Cookies`.
```

--------------------------------

### FusionAuthProviderContext Properties

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/interfaces/providers_FusionAuthProviderContext.FusionAuthProviderContext.md

This interface exposes several properties for managing user authentication state and actions.

```APIDOC
## Interface: FusionAuthProviderContext<T>

### Properties

- **error**: `null` | `Error`
  Error occurred while fetching userInfo.

- **fetchUserInfo**: () => `Promise`<`undefined` | `T`>
  Fetches user info from the 'me' endpoint. This is handled automatically if the SDK is configured with `shouldAutoFetchUserInfo`.

- **initAutoRefresh**: () => `void`
  Initializes automatic access token refreshing. This is handled automatically if the SDK is configured with `shouldAutoRefresh`.

- **isFetchingUserInfo**: `boolean`
  Indicates that the fetchUserInfo call is unresolved.

- **isLoggedIn**: `boolean`
  Whether the user is logged in.

- **manageAccount**: () => `void`
  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.

- **refreshToken**: () => `Promise`<`undefined` | `Response`>
  Refreshes the access token a single time. This is handled automatically if the SDK is configured with `shouldAutoRefresh`.

- **startLogin**: () => `void`
  Initiates the login flow.

- **startLogout**: () => `Promise`<`void`>
  Initiates the logout flow.

- **startRegister**: () => `void`
  Initiates the registration flow.
```

--------------------------------

### Custom User Info Typing in Vue SDK

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/CHANGES.md

Allows custom typing for `userInfo` using a generic argument, useful for SDK users with non-hosted backends. The `userInfo.value` will be inferred to the specified type.

```typescript
interface MyUser {
  customTrait: string;
  // ...
}
const { userInfo } = useFusionAuth<MyUser>();
// where `userInfo.value` is inferred to be of type `Ref<MyUser | null>`
```

--------------------------------

### FusionAuthAccountButtonComponent.manageAccount Method

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-angular/docs/classes/FusionAuthAccountButtonComponent.md

The `manageAccount` method is responsible for handling the user's account management actions. This typically involves redirecting the user to their account portal or initiating a related workflow.

```APIDOC
## Method: manageAccount

### `manageAccount(): void`

This method is called to initiate the account management flow for the logged-in user. It does not return any value.
```

--------------------------------

### FusionAuth Interface Methods

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/docs/interfaces/FusionAuth.md

The FusionAuth interface provides methods for user authentication, session management, and account operations.

```APIDOC
## Methods

### getUserInfo

• **getUserInfo**: () => `Promise<undefined | T>`

This is handled automatically if the SDK is configured with `shouldAutoFetchUserInfo`. Internally updates `isFetchingUser` and `userInfo` refs, as well as `error` if the request fails.

### initAutoRefresh

• **initAutoRefresh**: () => `undefined | Timeout`

Initializes automatic refreshing of the access token. Refresh is scheduled to happen at the configured `autoRefreshSecondsBeforeExpiry`.

### login

• **login**: (`state?`: `string`) => `void`

Initiates login flow.

### logout

• **logout**: () => `void`

Initiates a logout.

### manageAccount

• **manageAccount**: () => `void`

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.

### refreshToken

• **refreshToken**: () => `Promise<Response>`

Refreshes the access token a single time. Token refreshing is handled automatically if configured with `shouldAutoRefresh`.

### register

• **register**: (`state?`: `string`) => `void`

Initiates register flow.
```

--------------------------------

### FusionAuthProvider

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-react/docs/modules/providers_FusionAuthProvider.md

The FusionAuthProvider component is a React component that wraps your application and provides authentication context. It accepts configuration options for FusionAuth.

```APIDOC
## FusionAuthProvider

### Description

The `FusionAuthProvider` component is a React component that provides authentication context to its children. It requires a configuration object and optionally accepts children.

### Type Parameters

- `T` (type parameter): Represents the type of `UserInfo`, defaulting to `UserInfo`.

### Parameters

- `children` (ReactNode, optional): The child elements to be rendered within the provider.
- `FusionAuthProviderConfig` (object, required): Configuration object for the FusionAuthProvider.
  - `clientId` (string, required): The client ID for your FusionAuth application.
  - `instance` (FusionAuthClient, required): An instance of the FusionAuth client.
  - `redirectUri` (string, optional): The URI to redirect to after authentication.
  - `themeId` (string, optional): The ID of the theme to use for the FusionAuth UI.
  - `storage` (AuthStorage, optional): The storage mechanism to use for tokens (e.g., 'sessionStorage', 'localStorage').
  - `onSuccess` (function, optional): Callback function executed upon successful authentication.
  - `onFailure` (function, optional): Callback function executed upon authentication failure.

### Returns

- `Element`: A React element representing the `FusionAuthProvider`.

### Defined in

- `packages/sdk-react/src/components/providers/FusionAuthProvider.tsx:15`
```

--------------------------------

### Use FusionAuth Service with Composables

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/generated/README.adoc

Interact with the FusionAuth SDK's core functionality using the `useFusionAuth` composable in your Vue components. This provides methods for login, logout, and registration.

```vue
<template>
  <button @click="fusionAuth.login">Login</button>
  <button @click="fusionAuth.logout">Logout</button>
  <button @click="fusionAuth.register">Register</button>
</template>

<script setup lang="ts">
  import {useFusionAuth} from "@fusionauth/vue-sdk";

  const fusionAuth = useFusionAuth();
</script>
```

--------------------------------

### FusionAuth SDK Functionality Interface

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/CHANGES.md

Describes the core functionalities provided by the FusionAuth SDK, including user authentication status, fetching user information, and managing login/logout flows.

```typescript
interface FusionAuth {
  /**
   * Whether the user is logged in.
   */
  isLoggedIn: Ref<boolean>;
  /**
   * This is handled automatically if the SDK is configured with `shouldAutoFetchUserInfo`.
   * Internally updates `isFetchingUser` and `userInfo` refs, as well as `error` if the request fails.
   * @returns {Promise<UserInfo>}
   */
  getUserInfo: () => Promise<UserInfo | undefined>;
  /**
   * Data fetched from the configured 'me' endpoint.
   */
  userInfo: Ref<UserInfo | null>;
  /**
   * Indicates that the getUserInfo call is unresolved.
   */
  isGettingUserInfo: Ref<boolean>;
  /**
   * Error occurred within getUserInfo.
   */
  error: Ref<Error | null>;
  /**
   * Initiates login flow.
   * @param {string} [state] - Optional value to be echoed back to the SDK upon redirect.
   */
  login: (state?: string) => void;
  /**
   * Initiates register flow.
   * @param {string} [state] - Optional value to be echoed back to the SDK upon redirect.
   */
  register: (state?: string) => void;
  /**
   * Initiates a logout.
   */
  logout: () => void;
  /**
   * Refreshes the access token a single time.
   * Token refreshing is handled automatically if configured with `shouldAutoRefresh`.
   */
  refreshToken: () => Promise<void>;
  /**
   * Initializes automatic refreshing of the access token.

```

--------------------------------

### userInfo

Source: https://github.com/fusionauth/fusionauth-javascript-sdk/blob/main/packages/sdk-vue/docs/interfaces/FusionAuth.md

Represents data fetched from the configured 'me' endpoint. It is a Vue Ref that can hold null or a generic type T.

```APIDOC
## userInfo

### Description
Data fetched from the configured 'me' endpoint.

### Type
`Ref<null | T>`
```