Add authentication

Any web application needs user authentication. ROQ BaaS offers easy authentication through its SDK. For Next.js projects, you can utilize the signIn, signOut, and signUp methods from the roqBrowserClient factory.

Preparation

It is recommended that you start by reading the Quickstart guide to set up a new Next.js project.

Authentication

In this section, we will cover the process of adding a login button, a logout button, and a signup button.

Add login button

To add a login button to a Next.js page, we can use the signIn API from the generated SDK. The roqBrowserClient factory live in the src/lib/roq/roq-client.ts. To use it you must import it first:

page.tsx

import { roqBrowserClient } from "@/lib/roq/roq-client";
 
export default function Home() {
  return (
    <main className={`text-center flex flex-col items-center justify-between p-24`}>
        <h1 className='m-10'>Welcome</h1>
      <button 
          onClick={() => roqBrowserClient.signIn()}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Login
        </button>
    </main>
  )
}

If you want to redirect the page after the login process, you should use the postLoginRedirect option.

For example, suppose we want to log in with the type owner and we want to redirect the page to the user page when it's authenticated:

page.tsx

import { roqBrowserClient } from "@/lib/roq/roq-client";
 
export default function Home() {
 
  const handleSignIn = () => {
      roqBrowserClient.signIn('owner', { postLoginRedirect: '/user' })
  }
 
  return (
    <main className={`text-center flex flex-col items-center justify-between p-24`}>
        <h1 className='m-10'>Welcome</h1>
      <button 
          onClick={handleSignIn}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Login
        </button>
    </main>
  )
}

You can customize the postLoginRedirect option value to redirect the route to any page after the successful login.

Please note that the login process will take the user to the ROQ login form. You can customize the login form through ROQ Console.

Add signup button

Similar to the login process, the signup process is handled by the signUp method from the generated SDK.

page.tsx

import { roqBrowserClient } from "@/lib/roq/roq-client";
 
export default function Home() {
  return (
    <main className={`text-center flex flex-col items-center justify-between p-24`}>
      <h1 className='m-10'>Welcome</h1>
      <button 
        onClick={() => roqBrowserClient.signUp()}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Signup
      </button>
    </main>
  )
}

If we want to redirect the page after signing up, you need to configure the postLoginRedirect option.

page.tsx

import { roqBrowserClient } from "@/lib/roq/roq-client";
 
export default function Home() {
 
  const handleSignUp = () => {
      roqBrowserClient.signUp('owner', { postLoginRedirect: '/user' })
  }
 
  return (
    <main className={`text-center flex flex-col items-center justify-between p-24`}>
        <h1 className='m-10'>Welcome</h1>
        <button 
          onClick={handleSignUp}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Signup
        </button>
 
    </main>
  )
}

After successfully signing up, the user will be redirected to the user page.

Please note that the signup process will take the user to the ROQ signup form. You can customize the signup form through the ROQ Console.

Add logout button

To add a logout button is pretty simple. We can add a link or HTML button tag to call the signOut method from the generated SDK.

user/page.tsx

import { roqBrowserClient } from "@/lib/roq/roq-client";
import { useRoqPlatformUserProfiles } from "@/lib/roq";
 
function User() {
  return <AuthenticatedSection />
}
 
const AuthenticatedSection = () => {
  const {data} = useRoqPlatformUserProfiles()
 
  return (
    <div className='m-5'>
        <h1 className='m-10'>Welcome</h1>
        <p className='my-10'>Logged in as: <strong>{data?.userProfiles.data[0].email}</strong></p>
        <br />
        <button
          onClick={() => roqBrowserClient.signOut()}
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Logout
        </button>
    </div>
  )
}

The useRoqPlatformUserProfiles() is a hook to get the user's profile data. It supports filtering, sorting, and searching for specific user profile data.

Quickstart Express.js