# React, Angular, and Vue SDK Configuration Reference

Learn about every configuration option the FusionAuth React, Angular, and Vue SDKs accept.

> For the index of this section of the site, see [llms.txt](https://fusionauth.io/docs/llms.txt)

The [React](https://fusionauth.io/docs/sdks/react-sdk.md), [Angular](https://fusionauth.io/docs/sdks/angular-sdk.md), and [Vue](https://fusionauth.io/docs/sdks/vue-sdk.md) SDKs share one set of configuration options. This page lists every option for React SDK `2.7.0`, Angular SDK `2.1.0`, and Vue SDK `1.4.0`.

## Pass the Configuration

Each SDK takes the options in a different place:

*   React: pass the options as props to `<FusionAuthProvider>`. The type is `FusionAuthProviderConfig`.
*   Angular: pass the options to `FusionAuthModule.forRoot()`. The type is `FusionAuthConfig`.
*   Vue: pass the options to `app.use(FusionAuthVuePlugin, config)`. The type is `FusionAuthConfig`.

## Required Options

`serverUrl`

*   Type: `String`
*   Required

The origin of the server that handles login, logout, and token refresh. By default, this server is FusionAuth, which provides the [hosted backend](https://fusionauth.io/docs/apis/hosted-backend.md). In DPoP mode, this server must be FusionAuth.

The SDK replaces any path in this URL with the endpoint paths below. Set the paths with **`loginPath`** and the other path options, not in **`serverUrl`**.

`clientId`

*   Type: `String`
*   Required

The client Id of your FusionAuth [Application](https://fusionauth.io/docs/concepts/types/applications.md). The SDK sends the client Id as the `client_id` query parameter on every request.

`redirectUri`

*   Type: `String`
*   Required

The URL FusionAuth redirects the browser to after login and registration. Add this URL to the **Authorized redirect URLs** of the Application.

## Login and Logout Options

`scope`

*   Type: `String`
*   Optional

The OAuth scopes to request, separated by spaces, such as `openid offline_access`. When you leave out **`scope`**, the server uses the default scopes. The hosted backend requests `openid offline_access`.

`authParams`

*   Type: `Array`
*   Optional

Extra query parameters for the login and register requests, as an array of objects. For example, `[{ idp_hint: '82339786-3dff-42a6-aac6-1f1ceecb6c46' }]` adds `idp_hint` to the request. The SDK ignores **`authParams`** in DPoP mode.

`postLogoutRedirectUri`

*   Type: `String`
*   Optional

The URL FusionAuth redirects the browser to after logout. Defaults to **`redirectUri`**. Add this URL to the **Authorized redirect URLs** of the Application.

`onRedirect`

*   Type: `Function`
*   Optional

A function the SDK calls when the browser returns from login or registration. The SDK passes the **`state`** value from the login or register call.

`onLoginFailure`

*   Type: `Function`
*   Optional

A function the SDK calls with an `Error` when the code exchange fails after login. The SDK calls this function only in DPoP mode, because the hosted backend handles the exchange in hosted backend mode.

## Token Options

`shouldAutoRefresh`

*   Type: `Boolean`
*   Optional
*   Defaults to `false`

When `true`, the SDK refreshes the access token before the token expires. Refresh requires a refresh token, so request the `offline_access` scope.

`autoRefreshSecondsBeforeExpiry`

*   Type: `Number`
*   Optional
*   Defaults to `10`

How many seconds before the access token expires the SDK refreshes the token. Applies only when **`shouldAutoRefresh`** is `true`.

`onAutoRefreshFailure`

*   Type: `Function`
*   Optional

A function the SDK calls with an `Error` when an automatic refresh fails.

`shouldAutoFetchUserInfo`

*   Type: `Boolean`
*   Optional
*   Defaults to `false`

When `true`, the SDK fetches the user's profile after login. React and Vue only. In Angular, call `FusionAuthService.getUserInfo()` instead.

`accessTokenExpireCookieName`

*   Type: `String`
*   Optional
*   Defaults to `app.at_exp`

The name of the cookie that holds the access token expiration time, in seconds since the UNIX epoch. The SDK reads this cookie to decide whether the user is logged in. Change the name when your own backend sets a different cookie. The Angular and Vue types don't declare this option, but both SDKs read the option.

## Endpoint Path Options

The SDK appends these paths to **`serverUrl`**. The defaults match the [hosted backend](https://fusionauth.io/docs/apis/hosted-backend.md). Change the paths when you run your own backend, as described in [Use Your Own Backend](#use-your-own-backend).

`loginPath`

*   Type: `String`
*   Optional
*   Defaults to `/app/login/`

The path the browser opens to start login.

`registerPath`

*   Type: `String`
*   Optional
*   Defaults to `/app/register/`

The path the browser opens to start registration.

`logoutPath`

*   Type: `String`
*   Optional
*   Defaults to `/app/logout/`

The path the browser opens to log out.

`tokenRefreshPath`

*   Type: `String`
*   Optional
*   Defaults to `/app/refresh/`

The path the SDK calls to refresh the access token.

`mePath`

*   Type: `String`
*   Optional
*   Defaults to `/app/me/`

The path the SDK calls to fetch the user's profile.

## DPoP Options

DPoP mode requires React SDK `2.7.0`, Angular SDK `2.1.0`, or Vue SDK `1.4.0`, and FusionAuth `1.63.0` or later. For setup, see [Use DPoP in a Browser App](https://fusionauth.io/docs/authentication/oauth/dpop/browser-app.md).

`useDpop`

*   Type: `Boolean`
*   Optional
*   Defaults to `false`

When `true`, the SDK calls the FusionAuth OAuth endpoints directly and binds tokens to a key pair in the browser. The SDK ignores the endpoint path options in DPoP mode.

`dpopTokenStorage`

*   Type: `String`
*   Optional
*   Defaults to `localStorage`

Where the SDK stores tokens in DPoP mode. `localStorage` keeps the user logged in across page reloads. `memory` clears the tokens on reload. The SDK stores tokens under a key that includes the client Id, so two Applications on the same origin keep separate tokens.

## Server-Side Rendering Options

`nextCookieAdapter`

*   Type: `Function`
*   Optional

React only. The `useCookies` function from the [next-client-cookies](https://www.npmjs.com/package/next-client-cookies) package, so the SDK can read cookies during Next.js server rendering. See the [React SDK](https://fusionauth.io/docs/sdks/react-sdk.md#configuration-with-nextjs).

`nuxtUseCookie`

*   Type: `Function`
*   Optional

Vue only. The Nuxt `useCookie` function, so the SDK can read cookies during Nuxt server rendering. See the [Vue SDK](https://fusionauth.io/docs/sdks/vue-sdk.md#configuring-with-nuxt).

## Use Your Own Backend

To use your own backend instead of the hosted backend, set **`serverUrl`** to your backend and implement the endpoints the SDK calls:

| Option | Request | Query parameters | Expected result |
| --- | --- | --- | --- |
| **`loginPath`** | Browser navigation | `client_id`, `redirect_uri`, `scope`, `state`, and any **`authParams`** | Start the OAuth Authorization Code grant and set the session cookies. |
| **`registerPath`** | Browser navigation | Same as **`loginPath`** | Start registration and set the session cookies. |
| **`logoutPath`** | Browser navigation | `client_id`, `post_logout_redirect_uri` | Clear the session cookies and log the user out of FusionAuth. |
| **`tokenRefreshPath`** | `POST` with cookies, `Content-Type: text/plain` | `client_id` | Refresh the tokens, update the cookies, and return a `2xx` status. |
| **`mePath`** | `GET` with cookies | None | Return the user's profile as JSON. |

After login and each refresh, set a cookie that JavaScript can read, with the name in **`accessTokenExpireCookieName`** and the access token expiration time in seconds since the UNIX epoch. Without this cookie, the SDK treats the user as logged out.

For an example backend, see the [FusionAuth JavaScript SDK Express server](https://github.com/FusionAuth/fusionauth-javascript-sdk-express).

Related

[Authentication Use DPoP In A Browser App Learn how to bind tokens to the browser with DPoP using the FusionAuth React, Angular, or Vue SDK. dpopjavascript sdk](https://fusionauth.io/docs/authentication/oauth/dpop/browser-app.md)

[SDKs Angular SDK The FusionAuth Angular SDK allows you to add login, logout and registration functionality to your Angular application. angular sdkspa authentication](https://fusionauth.io/docs/sdks/angular-sdk.md)

[SDKs React SDK The FusionAuth React SDK allows you to add login, logout and registration functionality to your React application. react sdkspa authentication](https://fusionauth.io/docs/sdks/react-sdk.md)

[SDKs Vue SDK The FusionAuth Vue SDK allows you to add login, logout and registration functionality to your Vue application. vue sdkspa authentication](https://fusionauth.io/docs/sdks/vue-sdk.md)
---

## Other pages in SDKs

> For the full index of this section, see [SDKs](https://fusionauth.io/docs/llms-sdks.txt).

- [Kotlin SDK for Android](https://fusionauth.io/docs/sdks/android-sdk.md): The FusionAuth Android SDK allows you to add different OAuth2 and OpenID Connect functionalities to your Android application. It's a highly standardized and simplified starting point for developers to easily integrate FusionAuth in their own custom Android mobile apps by taking care of all the dependencies.
- [Angular SDK](https://fusionauth.io/docs/sdks/angular-sdk.md): The FusionAuth Angular SDK allows you to add login, logout and registration functionality to your Angular application.
- [Example Apps](https://fusionauth.io/docs/sdks/examples.md): Learn about example applications using FusionAuth.
- [Go Client Library](https://fusionauth.io/docs/sdks/go.md): The FusionAuth Go Client library allows you to call FusionAuth from Go applications.
- [Java Client Library](https://fusionauth.io/docs/sdks/java.md): The FusionAuth Java Client library allows you to call FusionAuth from Java applications.
- [.NET Core Client Library](https://fusionauth.io/docs/sdks/netcore.md): The FusionAuth .NET Core Client library allows you to call FusionAuth from a .NET Core application.
- [PHP Client Library](https://fusionauth.io/docs/sdks/php.md): The FusionAuth PHP Client library allows you to call FusionAuth from PHP applications.
- [Python Client Library](https://fusionauth.io/docs/sdks/python.md): The FusionAuth Python Client library allows you to call FusionAuth from Python applications.
- [React SDK](https://fusionauth.io/docs/sdks/react-sdk.md): The FusionAuth React SDK allows you to add login, logout and registration functionality to your React application.
- [Ruby Client Library](https://fusionauth.io/docs/sdks/ruby.md): The FusionAuth Ruby Client library allows you to call FusionAuth from Ruby applications.
- [Swift SDK for iOS](https://fusionauth.io/docs/sdks/swift-sdk.md): Create iOS mobile apps with FusionAuth-based authentication using the Swift SDK.
- [TypeScript Client Library](https://fusionauth.io/docs/sdks/typescript.md): The FusionAuth Typescript Client library allows you to call FusionAuth from JavaScript and Typescript applications.
- [Vue SDK](https://fusionauth.io/docs/sdks/vue-sdk.md): The FusionAuth Vue SDK allows you to add login, logout and registration functionality to your Vue application.
