Custom Sign Up/Login Page for SPA

Help
1

Hello! I am currently building a React website that implements the Auth0-SPA sdk to authenticate. I would like to make my own personal sign-up page so the login experience is more fluid.

Now I wanted to do this by using the Authentication API, but I realized that since I’m using the SPA sdk I’m not sure how I would be able to check if the user is signed in later on in the app (using this tutorial).

I’m looking for a solution where I can continue using the SPA sdk throughout my React app, while being able to authenticate myself (I was expecting to make a POST API call, but if there are only other ways that is fine).

EXAMPLE:

  • Entire React app is wrapped in the Auth0Provider.
  • User is not authenticated, this is checked with the SPA sdk
  • User then logs in through my login page (hopefully I can keep using the SPA sdk for this, but it isn’t seeming like that. Maybe an Auth0 API call, and then the call returns something I can then somehow send to the SPA sdk?).
  • User navigates throughout website and I can check for authentication (as long as user info, loading, etc…) still using the SPA sdk.
2

Update: I found this question asking the same thing with a solid answer here.

I clicked the link the answer gave for Lock v11 for Web and it is hard to keep up with. Could I get a runthrough of how to implement this into a React App that has a login page with Username, Email, Password, as well as additional signup fields like Date Of Birth?

Thank you very much. Any help is much appreciated!