Removing the Buttons from the Passkeys Page

Knowledge Articles
1

Overview

This article explains whether it is possible to customize the Universal Login Passkeys page by removing the Continue without passkeys button or the Don’t show me this again check box from the Passkey page.

rtaImage (12)
rtaImage (12)972×1426 117 KB

Applies To

  • Universal Login
  • Passkeys

Solution

The links within the Universal Login - Dashboard configuration cannot be removed using current configuration options. A future solution to enable connections using only passkeys is under development.

However, creating a custom version of this screen that does not display either of those options is supported with ACUL (Advanced Customizations for Universal Login):

  • Prerequisites:
    • A Custom Domain for the Tenant
    • Identifier First Authentication enabled
    • A Sample Application that has the custom domain address configured, the client ID and Secret taken from an Application created in the Dashboard
    • A Single Page Application cloned from this github repository (follow the steps from README)
  • In the Single Page Application, add a new folder in src/screens called Passkey with an index.tsx file with this sample code:
import PasskeyEnrollment from '@auth0/auth0-acul-js/passkey-enrollment';

export const PasskeyScreen = () => {
  const handleClick = () => {
      const passkeyEnrollment = new PasskeyEnrollment();
      passkeyEnrollment.continuePasskeyEnrollment();
    };
    
  return (
    <div className="w-[100vw] min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-6 bg-white p-8 rounded-lg shadow-md">

        <button 
          className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 color: white"
          onClick={() => handleClick()}
        >
          Continue Passkey
        </button>

      </div>
    </div>
  );
};
  • Next, add the screen in the App.tsx :
import React, { useEffect, Suspense } from "react";
import { getCurrentScreen } from "@auth0/auth0-acul-js";

const LoginIdScreen = React.lazy(() => import("./screens/LoginId"));
const PasskeyScreen = React.lazy(() => import("./screens/Passkey")); ///<------ add the screen

const App: React.FC = () => {
  const [screen, setScreen] = React.useState("login-id");
  useEffect(() => {
    const current = getCurrentScreen();
    setScreen(current!);
  }, []);

  const renderScreen = () => {
    console.log(`current screen: ${screen}`)
    switch (screen) {
      case "login-id":
        return <LoginIdScreen />;
      case "passkey-enrollment": ///<------ add the prompt
        return <PasskeyScreen />; ///<------ add the screen  
      default:
        return <>No screen rendered</>;
    }
  };

  return <Suspense fallback={<div>Loading...</div>}>{renderScreen()}</Suspense>;
};

export default App;

curl --location --request PATCH 'https://<DOMAIN>/api/v2/prompts/passkeys/screen/passkey-enrollment/rendering' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer <API-TOKEN>' \
--data '{
    "rendering_mode": "advanced",
    "context_configuration": [],
    "default_head_tags_disabled": false,
    "head_tags": [
      {
        "tag": "script",
        "attributes": {
          "src": "http://127.0.0.1:8080/index.js",
          "defer": true
        }
      },
      {
        "tag": "link",
        "attributes": {
          "rel": "stylesheet",
          "href": "http://127.0.0.1:8080/index.css"
        }
      }
    ]
}'