How to Customize the New Universal Login Widget using Custom Query Parameters

Knowledge Articles
, ,
1

Overview

This article will describe how to pass custom query parameters using buttons in the application with the /authorize call. These parameters allow to customize the widget’s look and feel.

Applies To

  • New Universal Login
  • Custom query parameters
  • Management API
  • Custom Domain

Solution

Requirements:

NOTE: The example application is an SPA (Single Page Application) using React.

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.