React, Angular, and Vue SDK Configuration Reference

Edit on GitHubView Markdown
On this page

The React, Angular, and Vue 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. 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 ApplicationA software program that your users log in to through FusionAuth.. 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. Change the paths when you run your own backend, as described in 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.

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 package, so the SDK can read cookies during Next.js server rendering. See the React SDK.

nuxtUseCookie
  • Type: Function
  • Optional

Vue only. The Nuxt useCookie function, so the SDK can read cookies during Nuxt server rendering. See the Vue SDK.

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.

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
SDKs

Angular SDK

The FusionAuth Angular SDK allows you to add login, logout and registration functionality to your Angular application.

angular sdkspa authentication
SDKs

React SDK

The FusionAuth React SDK allows you to add login, logout and registration functionality to your React application.

react sdkspa authentication
SDKs

Vue SDK

The FusionAuth Vue SDK allows you to add login, logout and registration functionality to your Vue application.

vue sdkspa authentication