Client side react web app

Get Help
,
1

We have a react based client side only app that need to support authentication via Google, Github and Username / Password.

Our requirement is to have login page fully hosted on ourside and have it on our own SCM.

There are options to customize universal login page. How to have it fully self hosted?

3

Hi @jmj

Welcome back to the Auth0 Community!

Thank you for posting your question. I think that there are two possible ways of how you can achieve the self-hosted results for your login-page.

  1. The first one that I would probably recommend is to try the Advanced Customization for Universal Login (ACUL) which is currently in Early Access stage:

Advanced Customizations flow

  1. Your developers can build custom interfaces for specific Universal Login screens using your preferred front-end tech stack (such as React, Angular, or Vue) and any internal design systems, component libraries, or third-party CSS/Javascript.
  2. Your CI/CD pipeline then bundles those interfaces and deploys them to your content delivery network (CDN).
  3. Developers use the Auth0 Management API to configure an advanced rendering mode for specific Universal Login screens and provide links to your CDN-hosted asset bundles.
  4. When users authenticate, Universal Login determines which screen to show and the proper rendering mode for the requested screen.
  5. If the current screen is not configured to use advanced rendering mode, Universal Login defaults to the regular Universal Login interface, including any customizations you made to the default interface.
  6. If the current screen is configured to use advanced rendering mode, Universal Login returns the advanced rendering mode page template.
  7. When submitting data from custom interfaces, the server expects the data to be submitted via a POST request to the same page as url-encoded form data using the content-type application/x-www-form-urlencoded. Sending JSON results in an error.
  8. The server validates the submitted data. If there are any errors, the server returns the current screen and includes the errors in the context object. If there are no errors, the server determines which screen to show next and reviews the rendering mode for it.

You can read more about ACUL from our docs → https://auth0.com/docs/customize/login-pages/advanced-customizations

  1. 2nd approach would cover the usage of Embedded Login that you host by yourself. 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 from you application with the framework that you would be using.

Thanks!
Dawid

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.