Docs/help around self-hosting the login form

[acr]

Hi there!

I could really use some help making sense of the various options available to me for completely customizing the login form & having it appear within our app’s onboarding flow rather than being redirected to the Auth0 domain. We have a React-based single page app and we are currently using the classic universal login experience. We would like to have more control over the login form and be able to completely customize it & have it be part of our application’s codebase. Would that be an example of an embedded login? It sounds like there are some warnings in that doc around the increased security risks of going that route. How does embedded differ from using one of the various JS libraries (auth0-js, auth0-spa-js, auth0-react)? Or does the embedded approach use those libraries (e.g. they’re not different)?

In sum, if we want to completely host and manage the login form (allowing both social and email/password authentication) and use it without any redirects from within our SPA onboarding flow, what docs should I be looking at for guidance? I can’t seem to figure out which category/bucket of Auth0 docs this approach falls under. Also, can you please point to any examples of self-hosted SPA login form usage?

Thanks a bunch!

Al

[david_wisecarver]

Hi @acr,

Welcome to Auth0 Community!

Yes, what you are describing would be an embedded login page, and we generally do not recommend this approach for the security implications outlined here: Centralized Universal Login vs. Embedded Login

If you do decide to use Embedded Login, you must configure your application for Cross-Origin Resource Sharing and should configure a custom domain. You can then implement the Lock SDK or Auth0.js SDK within your application, or call the Auth0 Authentication API directly.

I believe that the best resource we have for an example would be the ready-to-go sample app for Auth0.js that can be used to demonstrate an embedded login.

Hope this helps!

Thanks,
Dave