Embed Next.JS - Old Not SSR

What will we build?

In this quickstart, we will add the Frontegg embedded login box to your Next.JS application.

In 5 minutes from now (start your stopwatch), your application will have a login box with Sign-in, Signup, and SSO. All this with just a few lines of code.

Ready to start?

⚡ Before you start: ⚡

📘

Getting your Frontegg subdomain

Frontegg creates a unique subdomain for every workspace created on the account. In order to retrieve the subdomain that will act as the baseUrl in the integration, navigate to your workspace administration menu, and copy the workspace domain.

You will need them for this guide.

STEP 1: Create a New Next.JS application

📘

If you have an existing app, skip this step.

npx create-next-app app-with-frontegg # provide the application a name (we chose app-with-frontegg)
cd app-with-frontegg

yarn create next-app # provide the application a name (we chose app-with-frontegg)
cd app-with-frontegg

STEP 2: Install Frontegg libraries

Run the following command to Install Frontegg Next.JS library.

npm install @frontegg/nextjs

yarn add @frontegg/nextjs

STEP 3: Configuration

Wrap your _app.js component with FronteggProvider.

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { FronteggProvider } from '@frontegg/nextjs';

const contextOptions = {
  baseUrl: 'https://[YOUR-SUBDOMAIN].frontegg.com',
}

// pass keepSessionAlive to the FronteggProvider to automatically refresh user's session
// const authOptions = {
//   keepSessionAlive: true
//};

function MyApp({ Component, pageProps }: AppProps) {
  return <FronteggProvider contextOptions={contextOptions}>
    <Component {...pageProps}/>
  </FronteggProvider>
}

export default MyApp

STEP 4: Getting the user context

Frontegg exposes the user context and the authentication state via the useAuth hook which allows you to redirect non-authenticated users to the login page and to get the user's information.

Another hook which you can choose (as shown in the sample below) is the useAuthUser which will redirect non-authenticated users to the login screen.

import type { NextPage } from 'next'
import {useAuthUser} from '@frontegg/nextjs';
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  const user = useAuthUser();

  return (
    <div className={styles.container}>
      <div>
        <img src={user?.profilePictureUrl} alt={user?.name}/>
      </div>
      <div>
        <span>Logged in as: {user?.name}</span>
      </div>
      <div>
        <button onClick={() => alert(user.accessToken)}>What is my access token?</button>
      </div>
      <div>
        <button onClick={() => window.location.href = '/account/logout'}>Click me to logout</button>
      </div>
    </div>
  )
}

export default Home

Great, Frontegg is now integrated with your app!

Login and logout routes have been added to your app:

• Signup screen is at http://localhost:3000/account/sign-up
• Login screen is at http://localhost:3000/account/login

If you are already logged in, go to http://localhost:3000/account/logout and log out.

Give it a try now!

Open http://localhost:3000/account/sign-up and sign up with your first user.