Frontegg's built-in authentication methods

This guide will discuss the various capabilities within the Frontegg client-side SDKs that handle authentication. All the methods that are discussed below can be found under the @frontegg folder in your node_modules. Frontegg has two main login implementation options:

• Hosted Login
• Embedded Login

While the Frontegg Hosted Login relies on OAuth2 authentication protocol, the embedded login relies directly on Frontegg APIs for authentication. The methods for each of these login types differ. Both methods rely on fe_refresh cookie that is stores in the browser to check whether a user is authenticated or not.

LoginWithRedirect

useLoginWithRedirect() is a react hook that is designed for Frontegg's hosted login and checks whether the user is authenticated by sending a request to /silent route with the fe_refresh cookie (if exists). In case disableSilentRefresh is passed as true, the authentication will be handled through /authorize route, per the OIDC protocol.

If a user is not authenticated, they will be automatically redirected to[your-frontegg-domain]/oauth/account/login for authentication. In order to avoid auto-redirect, please use loadUserOnFirstLoad.

FRONTEGG_AFTER_AUTH_REDIRECT_URL

This variable is supported in all client-side SDKs. The below example showcases how to pull query params or user's original route or query params. This data can be then used for redirecting a user to the original route they've tried to access, or if you use UTM, you can send these to your marketing platform.

  useEffect(() => {
    if (!isAuthenticated && !isLoading) {
      console.log( window.location.search.toString())
      window.localStorage.setItem('FRONTEGG_AFTER_AUTH_REDIRECT_URL', `/${window.location.search.toString()}`)
      loginWithRedirect();
    }
  }, [isAuthenticated, loginWithRedirect]);

UseAuth

This is a react hook that is designed to check whether the user is authenticated and allows to pull the user's data if they are. Unlike UseAuthUser, this hook, does not handle redirects OOTB.

UseAuthUser

This is a react hook that is designed for Frontegg's embedded login and checks whether the user is authenticated by sending a request to /refresh route with the fe_refresh cookie (if exists). If the cookie exists and valid, the user will get automatically logged in. If the cookie is does not exist or is expired, the user will get redirected automatically to the embedded login box on /account/login.

UseAuthUserOrNull

This is a react hook that is designed to check whether the user is authenticated and allows to pull the user's data if they are. Unlike UseAuthUser, and similar to UseAuth, this hook, does not handle redirects OOTB.

requestAuthorize

This method is designed to force a hard refresh of the page and user's token. The request will handle either a refresh for embedded or for a hosted login, depending on what is being passed for hostedLoginBox to the application.

logout

This method is designed for Frontegg's embedded login. It will delete the active fe_refresh cookie in the browser and the user will get logged out. Note that if you're using Frontegg's hosted login, you should explicitly call:

${baseUrl}/oauth/logout?post_logout_redirect_uri=${window.location} as described in the hosted login guides.

import {
  useAuth,
  useAuthUser,
  useAuthOrNull,
  useAuthActions,
} from '@frontegg/react'

const { requestAuthorize } = useAuthActions()
const { user, isAuthenticated, isLoading } = useAuth()