Auth0 Single Page App Confusion

So I am creating a Single Page Application using this page to build the app. I was able to create the login page and successfully was able to login my test users and got the correct successful feedback. That is using the index.html sample that was created. I was elated by that! I have the email provider linked to my Auth0 account. Another plus!

Now the troubling part is integrating the Single Page HTML page I created with my Auth0 app. I want the Single Page HTML to be a separate page within my organization’s website. The page is for members only so needs to be secure and only accessible by members.

I tried replacing the “Main Content” on the index.html example with my HTML code. I added the style sheet from my website so the page formatted correctly. But the result is a split screen with my HTML content displayed on the left side of the screen and the Universal Login on the right side. Not what I wanted. No matter whether I am logged in or not the Universal Login always appears.

After doing some research I found this page using newer constructs. Can I use that new construct to develop additional secured pages?

I was unable to use the “import { createAuth0Client } from ‘@auth0/auth0-spa-js’;”. I get “import : The term ‘import’ is not recognized as the name of a cmdlet, function, script file, or operable program." error message.

How to I move forward?

Thanks for all of your help!

Warren

I see Advanced Usage at the bottom of the page I used to create the test app. Maybe just use the popup? I will try it and report back.