Objective is to develop a React SPA (Express backend) that has a custom user registration form to collect additional data at the time of registration (such as 'first/last name', 'role', 'date of birth', 'address', 'telephone', 'consent to TOS / privacy policy', etc.). It needs to allow for both email/password and social logins.
I'd like to use Auth0. However, it seems that customization is limited. They encourage you to use the Universal Login, but it only allows customization of logo and colors. The @auth0/auth0-react package doesn't seem to have a sign-up function. The auth0-js package has the auth0.WebAuth class which has a signup function, in which additional fields can be stored in the 'user_metadata' object. There is a limit of only 10 properties.
What would be a considered the better practice to implement this?
Send all the fields (email, password, and additional fields) to my backend, and then have the backend (a) call the Auth0 Management API to create an account, (b) create a profile in my backend to store the additional fields and that links to the Auth0 'sub' field so that I can associate the profile with the user. This would avoid constantly retrieving user_metadata from Auth0.
Use auth0.webAuth and store the additional data in 'user_metadata' My backend would then have to call the Auth Management API to retrieve this data. I would also be limited by the max 10 properties in user_metadata.
Have the user signup, and if successful, redirect the user back to the SPA where the additional fields are entered and submitted to my backend for storage. This would violate the objective of collecting all of this information at the time of signup. I imagine this is the only approach that works when signing up with a social login.
Or is there another approach ?