How to Customize the New Universal Login Widget using Custom Query Parameters
Last Updated:
Overview
Applies To
- New Universal Login
- Custom query parameters
- Management API
- Custom Domain
Solution
- Use of a custom domain;
- Use of a page template.
Code used for Login button:
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
export const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return <button onClick={() => loginWithRedirect()}>Log In</button>;
};
export default LoginButton;
Code used for App A button:
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";
export const AppAButton = () => {
const { loginWithRedirect } = useAuth0();
const authorizationParams = {
"ext-a":'A'
}
return <button onClick={() => loginWithRedirect(authorizationParams)}>App A</button>;
};
export default AppAButton;
Code used for App B button:
import React from "react"; import { useAuth0 } from "@auth0/auth0-react"; export const AppBButton = () => { const { loginWithRedirect } = useAuth0(); const authorizationParams = { "ext-b":'B' } return <button onClick={() => loginWithRedirect(authorizationParams)}>App B</button>; }; export default AppBButton;
HTML used for the page template:
<!DOCTYPE html>
<html lang="{{locale}}">
<head>
{%- auth0:head -%}
</head>
<body >
{% if transaction.params.ext-a %}
<h1>You pressed button for Application {{ transaction.params.ext-a }} </h1>
{% elsif transaction.params.ext-b %}
<h1>You pressed button for Application {{ transaction.params.ext-b }} </h1>
{% endif %}
{%- auth0:widget -%}
</body>
</html>
NOTE: Universal Login page templates can only be updated using the Management API.