Registration button

Add registration button to your app

To add a registration or signup button to your application, you need to add a button that links to the signup page. ROQ provides a generated SDK that you can use to connect to the signup page, and the authentication feature is framework-agnostic and can be used in any framework supported by ROQ.

Here is an example of how to add a signup button to your application using Next.js:

import {roqBrowserClient} from "@/lib/roq/roq-client"
 
export default function SignupButton() {
  return (
    <button
      onClick={() => {
        roqBrowserClient.signUp()
      }}
    >
      Signup
    </button>
  )
}

By default, without any parameter passed to the signUp() function, the registration page that will be shown to the user is the default registration page. You can configure the ROQ Console registration form or create another one.

The registration page is a managed page that is hosted by ROQ and can be configured to have your own branding. The registration forms have keys that you can use in the signUp() function.

For example, if you have a registration form with the key developer, you can use the following code to open the registration page with your customs form:

import {roqBrowserClient} from "@/lib/roq/roq-client"
 
export default function SignupButton() {
  return (
    <button
      onClick={() => {
        roqBrowserClient.signUp("developer")
      }}
    >
      Signup
    </button>
  )
}

Redirect after registration

After registering, you can redirect the user to a specific page. To do so, you need to pass the postLoginRedirect optional parameter to the signUp() function.

For example, if you want to redirect the user to the dashboard page after registration in the Next.js application, you can use the following code:

import {roqBrowserClient} from "@/lib/roq/roq-client"
 
export default function SignupButton() {
  return (
    <button
      onClick={() => {
        roqBrowserClient.signUp("developer", { postLoginRedirect: "/dashboard"})
      }}
    >
      Signup
    </button>
  )
}