Add authentication to your Sitecore site using Auth0 with NextJs – Register New User

Posted on by gorhal

Friends of Sitecore! Yet another post about Auth0!
When will this man stop bombarding us with these Auth0 posts? 😀

In my previous posts:

I discussed how to integrate Auth0 into your Sitecore Next.js site and add Forgot Password functionality.

Now, let’s make it complete with Register New User functionality! 😊

Let’s dive in.
We will update the login component so that we can offer users the ability to sign up.

In our LoginForm component, we will add the UI for the Register New User feature:

{activeTab === 'register' && (
        <div className={styles.generalForm}>
          <form className={styles.form} onSubmit={handleRegisterSubmit}>
            <h2 className={styles.title}>Register</h2>
            <input
              id="registrationEmail"
              className={styles.input}
              name="registrationEmail"
              type="input"
              placeholder="Email"
              title="Email must be valid."
              required
            />
            <input
              className={styles.input}
              id="registrationPassword"
              name="registrationPassword"
              type="password"
              placeholder="Password"
              pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
              title="Password must include at least 8 characters, a number, a lowercase letter, and an uppercase letter."
              required
            />
            <input
              id="registrationName"
              className={styles.input}
              name="registrationName"
              type="text"
              placeholder="First and Last Name"
              pattern="^\S+\s+\S+.*" // Regex to enforce at least two words
              title="Please enter both first and last name."
              required
            />
            <button className={styles.button} type="submit">Register</button>

          </form>
        </div>
      )}

And the handler function handleRegisterSubmit will manage the form submission for the Register New User feature:

  const handleRegisterSubmit = async (event: {
    preventDefault: () => void;
    currentTarget: HTMLFormElement | undefined;
  }) => {
    event.preventDefault();
     // Clear previous messages
    setErrorMessage('');
    setSuccessMessage('');

    // Registration logic here
    const formData = new FormData(event.currentTarget);
    const email = formData.get('registrationEmail') as string;
    const username = formData.get('registrationEmail') as string;
    const password = formData.get('registrationPassword') as string;
    const name = formData.get('registrationName') as string; // Assuming you have a name field
    
    try {
      const res = await fetch('/api/auth/signup', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email,
          username,
          password,
          name,
        }),
      });

      if (!res.ok) {
        // Extract error message from response if available
        const errorData = await res.json();
        const errorMessage = errorData.message || 'Registration failed';
        throw new Error(errorMessage);
      }

      // If registration was successful
      setSuccessMessage('Registration successful. Please check your email to verify your account');
      // Optionally reset form or redirect user
      // event.currentTarget.reset();
      // router.push('/login'); // Redirect to login page or any other page

    } catch (error) {
      console.error('Registration error:', error);
      setErrorMessage(error.message);
    }
  };

Let’s break down what our handleRegisterSubmit function is doing step-by-step:

  1. Stopping the Default Form Action:
    • First, we use event.preventDefault() to stop the form from doing its default action, which is reloading the page. This allows us to handle the form submission with our own code.
  2. Clearing Previous Messages:
    • We reset any previous error or success messages by calling setErrorMessage('') and setSuccessMessage(''). This ensures a clean slate for displaying new messages to the user.
  3. Extracting Form Data:
    • We use the FormData API to get the data from the form element that triggered the event. This includes the user’s email, username, password, and name. These values are essential for the registration process.
  4. Sending the Registration Request:
    • We send a POST request to our /api/auth/signup endpoint. This endpoint handles the user registration process.
    • The request body includes the extracted email, username, password, and name, all formatted as JSON.
    • We set the Content-Type header to application/json to ensure the server correctly processes the JSON data.
  5. Handling the API Response:
    • If the request is successful (we get a status code in the 200 range), we display a success message using setSuccessMessage('Registration successful. Please check your email to verify your account').
    • Optionally, we could reset the form or redirect the user to another page, such as the login page, by using event.currentTarget.reset() and router.push('/login').
  6. Catching Errors:
    • If something goes wrong and the request fails, we catch the error.
    • We log the error to the console for debugging purposes and set an error message to inform the user that the registration failed using setErrorMessage(error.message).

In summary, our handleRegisterSubmit function manages the entire user registration process smoothly, ensuring users receive appropriate feedback whether the registration is successful or not. By following this structure, you can easily handle form submissions and provide a seamless registration experience for your users.

Let’s continue and create the endpoint /api/auth/signup that handles user registration requests for users through Auth0.

export default async function handler(req, res) {
  const domain = process.env.DOMAIN;
  const connection = process.env.CONNECTION;
  const client_id = process.env.CLIENT_ID;

  // Set CORS headers
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // Handle OPTIONS method (preflight request)
  if (req.method === 'OPTIONS') {
    return res.status(200).end();
  }

  if (req.method === 'POST') {
    const {
      email,
      password,
      username,
      name,
    } = req.body;

    try {
      const auth0Res = await fetch(`https://${domain}.auth0.com/dbconnections/signup`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          client_id,
          email,
          password,
          connection,
          username,
          name
        }),
      });

      if (!auth0Res.ok) {
        throw new Error(`Auth0 signup failed: ${await auth0Res.text()}`);
      }

      const auth0Data = await auth0Res.json();
      res.status(200).json({ success: true, data: auth0Data });
    } catch (error) {
      console.error(error);
      res.status(500).json({ success: false, error: error.message });
    }
  } else {
    // Respond to any methods other than POST and OPTIONS
    res.setHeader('Allow', ['POST', 'OPTIONS']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Let’s break down what our handler function is doing step-by-step:

  1. Setting Up Variables:
    • We grab some configuration details from environment variables: the Auth0 domain, connection, and client ID. These are essential for authenticating and communicating with the Auth0 API.
  2. Setting CORS Headers:
    • We set CORS headers to allow requests from any origin ('*'), and to allow POST and OPTIONS methods, along with the Content-Type header. This is crucial for handling cross-origin requests and preflight checks.
  3. Handling OPTIONS Method (Preflight Request):
    • If the request method is OPTIONS, we immediately respond with a 200 status to acknowledge the preflight request. This step is necessary for CORS.
  4. Handling POST Method (User Registration):
    • If the request method is POST, we proceed with the user registration process.
    • We extract the email, password, username, and name from the request body. These details are needed to create a new user.
  5. Sending the Signup Request to Auth0:
    • We make a POST request to the Auth0 dbconnections/signup endpoint with the extracted user details.
    • The request body includes the client_id, email, password, connection, username, and name, all formatted as JSON.
    • The Content-Type header is set to application/json to ensure the server processes the JSON data correctly.
  6. Handling the Response from Auth0:
    • If the Auth0 signup request is successful (we get a status code in the 200 range), we parse the JSON response and send it back to the client with a 200 status and a success message.
    • If the Auth0 signup request fails, we throw an error with the message from Auth0’s response.
  7. Catching Errors:
    • If any part of the request fails, we catch the error, log it to the console for debugging, and respond with a 500 status and an error message.
  8. Handling Other Methods:
    • If the request method is anything other than POST or OPTIONS, we set the Allow header to POST, OPTIONS and respond with a 405 Method Not Allowed status.

In summary, our handler function manages the user registration process by communicating with the Auth0 API. It ensures the correct CORS headers are set, handles preflight requests, and processes user signup requests. If the registration is successful, it sends back the user data; if there’s an error, it catches it and provides a helpful error message. This setup ensures a smooth and secure user registration process for your Sitecore Next.js application.

And there you have it! With the Register New User functionality, your Sitecore Next.js site is now fully equipped with a seamless user authentication flow using Auth0.

To recap, we:

  1. Updated the login component to include a registration form.
  2. Created a handler function to manage form submissions and send registration requests.
  3. Set up an endpoint to handle these registration requests and communicate with the Auth0 API.

By following these steps, you ensure that new users can sign up easily and securely, enhancing the overall user experience of your application.

I hope you found this guide helpful and that it makes your coding journey a bit easier. If you have any questions, run into any issues, or just want to share your progress, drop a comment below or reach out to me directly. I’m always happy to chat and help out!

That’s all for now folks 😊

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.