Customize the Replay auth gate

import React, { useCallback, useEffect, useRef, useState } from 'react';
import styled, { keyframes } from 'styled-components';
import type { ReplayGateProps } from '@redocly/theme/components/ReplayGate/ReplayGate';

// Replace with your OAuth 2.0 provider's details.
const CLIENT_ID        = 'YOUR_CLIENT_ID';
const OAUTH_BASE_URL   = 'https://auth.example.com/oauth2';
const USERINFO_URL     = 'https://auth.example.com/oidc/userinfo';
const REDIRECT_URI     = 'https://your-portal.example.com/api/login';
const STORAGE_KEY      = 'replay_access_token';
// Input name: OpenAPI security scheme id + suffix.
// For a scheme id 'bearerAuth' with type http/bearer, the suffix is '_token'.
const TOKEN_INPUT_NAME = 'bearerAuth_token';
// Used when the page selects no environment. Replay creates an environment for an unknown name.
const FALLBACK_ENV_NAME = 'Authorized';

// Pre-check: avoids a network call for clearly-expired JWTs.
function isJwtExpired(token: string): boolean {
  try {
    const b64 = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
    const { exp } = JSON.parse(atob(b64)) as { exp?: number };
    return typeof exp === 'number' && exp * 1000 <= Date.now();
  } catch {
    return false;
  }
}

// Validates the token against the OIDC UserInfo endpoint.
// Returns false if expired, revoked, or the network request fails.
async function isTokenValid(token: string): Promise<boolean> {
  if (isJwtExpired(token)) return false;
  try {
    const res = await fetch(USERINFO_URL, {
      headers: { Authorization: `Bearer ${token}` },
    });
    return res.ok;
  } catch {
    return false;
  }
}

const slideIn = keyframes`
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
`;

const spin = keyframes`
  to { transform: rotate(360deg); }
`;

const Spinner = styled.div`
  width: 32px;
  height: 32px;
  border: 3px solid var(--text-color-secondary, #888);
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: ${spin} 0.8s linear infinite;
`;

const OverlayWrapper = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: flex-end;
  z-index: var(--z-index-overlay);
`;

const Panel = styled.div`
  width: 440px;
  height: 100%;
  background: var(--bg-color, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 36px;
  gap: 20px;
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.14);
  animation: ${slideIn} 0.3s ease-out;
`;

// Always mounted at the same tree position across 'checking'/'authorizing'/'ready' so
// React never unmounts+remounts `children` — only its display toggles. Not rendered at
// all during 'gate'.
const ChildrenWrapper = styled.div<{ $hidden: boolean }>`
  display: ${({ $hidden }) => ($hidden ? 'none' : 'contents')};
`;

type Phase = 'checking' | 'gate' | 'authorizing' | 'ready';

export function ReplayGate({
  setEnvironmentValues,
  setSelectedEnvironment,
  selectedEnvironment,
  apiId,
  children,
}: ReplayGateProps) {
  // Starts at 'checking', not 'gate' — otherwise the sign-in button flashes on
  // screen for returning users while the stored token is still being validated.
  const [phase, setPhase] = useState<Phase>('checking');
  const [authUrl, setAuthUrl] = useState('');
  const popupRef = useRef<Window | null>(null);
  const channelRef = useRef<BroadcastChannel | null>(null);
  // Scope the stored token per API so different APIs in the same catalog don't
  // share (or overwrite) each other's credentials.
  const storageKey = apiId ? `${STORAGE_KEY}_${apiId}` : STORAGE_KEY;

  const startAuth = useCallback(() => {
    const state = crypto.randomUUID();
    const url =
      `${OAUTH_BASE_URL}/auth` +
      `?client_id=${encodeURIComponent(CLIENT_ID)}` +
      `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
      `&response_type=code&scope=openid+email+offline&state=${state}`;

    setAuthUrl(url);
    popupRef.current = window.open(url, '_blank');
    setPhase('authorizing');

    channelRef.current?.close();
    const channel = new BroadcastChannel('replay-auth');
    channelRef.current = channel;

    channel.onmessage = (event: MessageEvent) => {
      if (event.data?.type !== 'REPLAY_AUTH_DONE' || event.data.state !== state) return;
      channel.close();
      channelRef.current = null;
      popupRef.current?.close();
      popupRef.current = null;

      const token: string = event.data.access_token;
      localStorage.setItem(storageKey, token);

      // When the page selects no environment, name one anyway: Replay creates it on demand.
      const targetEnvironment = selectedEnvironment || FALLBACK_ENV_NAME;

      setEnvironmentValues(targetEnvironment, {
        [TOKEN_INPUT_NAME]: { value: token, isSecret: true },
      });
      setSelectedEnvironment(targetEnvironment);
      setPhase('ready');
    };
  }, [setEnvironmentValues, setSelectedEnvironment, selectedEnvironment, storageKey]);

  // On mount: restore a valid stored token, or start auth automatically.
  useEffect(() => {
    (async () => {
      const stored = localStorage.getItem(storageKey);
      if (stored && (await isTokenValid(stored))) {
        // When the page selects no environment, name one anyway: Replay creates it on demand.
        const targetEnvironment = selectedEnvironment || FALLBACK_ENV_NAME;

        setEnvironmentValues(targetEnvironment, {
          [TOKEN_INPUT_NAME]: { value: stored, isSecret: true },
        });
        setSelectedEnvironment(targetEnvironment);
        setPhase('ready');
      } else {
        localStorage.removeItem(storageKey);
        setPhase('gate');
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    return () => { channelRef.current?.close(); };
  }, []);

  return (
    <>
      {phase !== 'gate' && (
        <ChildrenWrapper $hidden={phase !== 'ready'}>{children}</ChildrenWrapper>
      )}

      {phase !== 'ready' && (
        <OverlayWrapper>
          <Panel>
            {phase === 'checking' && <Spinner />}

            {phase === 'gate' && (
              <>
                <h2>Sign in to try it</h2>
                <p>Sign in to send live API requests.</p>
                <button onClick={startAuth}>Sign in</button>
              </>
            )}
            {phase === 'authorizing' && (
              <>
                <h2>Complete sign-in</h2>
                <p>A sign-in window has opened. Complete sign-in to continue.</p>
                <button
                  onClick={() => {
                    if (popupRef.current && !popupRef.current.closed) {
                      popupRef.current.focus();
                    } else {
                      popupRef.current = window.open(authUrl, 'auth-popup', 'width=520,height=680');
                    }
                  }}
                >
                  Re-open sign-in window
                </button>
              </>
            )}
          </Panel>
        </OverlayWrapper>
      )}
    </>
  );
}