Lock, Auth0.js, Auth0 React SDK or Authentication API

I have been reading through the forum and documentation for a while but I cannot find a conclusive answer to my case. Sorry if this has been asked before.

We have a customer portal consisting of a React SPA frontend and a NodeJS server with a restful API built with ExpressJS as backend. Our current authentication system is cookie-based and custom build. It has the following steps:

  1. A new user can register on our marketing website

  2. The marketing website sends a request to our API. A new user is registered and a branded verification email is sent with Postmark

  3. The user clicks on the link in the email which leads to our customer platform. The user can setup an account by filling in his profile details (name, address, phone and a password). This data is send to our API along the verification token from the url.

  4. After the token is being verified on the server, the password is hashed and stored in our database along with the profile information. At this point the user is verified and a cookie is send back to the browser so the user is logged in.

  5. From now on the cookie is send with every request to authenticate the user on server side and send back the requested data.

We have additional flows and routes to get the current logged in user based on the received cookie, reset a forgotten password and deactivate/reactive an account.

We are looking to migrate to Auth0 and extend it to our other platforms. We also need a way to let third party apps request data from our API after authorization.

So far we have created an Auth0 account and setup a machine-to-machine application. With the help of the node-auth0 package (https://www.npmjs.com/package/auth0) we were able to migrate our register function to create a new user in Auth0 by creating a management client and use the createUser() function.

Currently we generate a random password otherwise we get an error. Is there a way to create an unverified user without sending a password?

For now we have verified the user with the management api so we can start working on migrating the frontend. Unfortunately we are stuck on this part. We want to keep our custom made login/forgot password/reset password pages because they have a specific brand design with images and animations and we don’t see a way to recreate these with the Universal Login branding tools.

On the other hand, the Auth0 React SDK with the
useAuth0 hook has some nice functionalities to check if the user is authenticated, has the right scopes to access certain frontend pages and refresh tokens. We would like to use all this features together with our custom branded auth pages and branded emails.

As far as we know it’s not possible to use the Auth0 React SDK without using universal login. This leads three other options open: Lock.js and Auth0.js. We are confused about the difference between these two. The third option is keeping the frontend as it is and only change the backend functionalities to login/reset a password and deactivating an account by using the Authentication/Management API but this feels like the most insecure way.

Can someone gives us a bit more information specific for our case?