Can someone please help me understand how can I customize the classic universal login from my react app

[FrontENdNoob]

I am implementing auth0 for the first time. Until now I have read about auth0-lock, auth0-react, auth0-js and auth0-spa.

I couldn’t find a way to provide the css, theme and other UI options from my react app.
This is my Setup.

import Router from '@/router/router';
import { getConfig } from './auth/config/config';
import { Auth0Provider } from "@auth0/auth0-react";
load();

const config = getConfig();

const providerConfig = {
    domain: config.domain,
    clientId: config.clientId,
    authorizationParams: {
        redirect_uri: window.location.origin
    }
};


ReactDOM.createRoot(document.getElementById('root')).render(
    <Auth0Provider {...providerConfig}>
        <React.StrictMode>
            <Router />
        </React.StrictMode>
    </Auth0Provider>
);

I have enabled the Customize Login Page and selected Lock from the templates.

1. Do I need to update the template?
2. Can I provide theme, logo in the providerConfig object ?

[rueben.tiow]

Hi @FrontENdNoob,

Welcome to the Auth0 Community!

@FrontENdNoob

Do I need to update the template?

Yes, you will need to update the HTML template. If you need to make any CSS customizations, they must be inline with your custom login page template, as it’s not possible to host a separate CSS file in your tenant. (Reference: Custom Login Form template)

@FrontENdNoob

Can I provide theme, logo in the providerConfig object ?

Unfortunately, that won’t work because the providerConfig object is used for instantiating a new instance of Auth0.

If you need to make changes to the Classic Universal Login page, you will need to perform them in your Universal Login settings. Please refer to our Customize Classic Login Pages documentation.

Thanks,
Rueben