import Head from 'next/head'; import { useRouter } from 'next/router'; import type { FormEvent } from 'react'; import { useEffect, useRef, useState } from 'react'; export default function Login() { const router = useRouter(); const { id, audience, acsUrl, providerName, relayState, namespace } = router.query; const authUrl = namespace ? `/api/namespace/${namespace}/saml/auth` : '/api/saml/auth'; const [state, setState] = useState({ username: 'jackson', domain: 'example.com', acsUrl: 'https://sso.eu.boxyhq.com/api/oauth/saml', audience: 'https://saml.boxyhq.com', }); const acsUrlInp = useRef(null); const emailInp = useRef(null); useEffect(() => { if (acsUrl && emailInp.current) { emailInp.current.focus(); emailInp.current.select(); } else if (acsUrlInp.current) { acsUrlInp.current.focus(); acsUrlInp.current.select(); } }, [acsUrl]); const handleChange = (e: FormEvent): void => { const { name, value } = e.currentTarget; setState({ ...state, [name]: value, }); }; const handleSubmit = async (e: FormEvent) => { e.preventDefault(); const { username, domain } = state; const response = await fetch(authUrl, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email: `${username}@${domain}`, id, audience: audience || state.audience, acsUrl: acsUrl || state.acsUrl, providerName, relayState, }), }); if (response.ok) { const newDoc = document.open('text/html', 'replace'); newDoc.write(await response.text()); newDoc.close(); } else { document.write('Error in getting SAML response'); } }; return ( <> Mock SAML Identity Provider - Login

SAML SSO Login

{!acsUrl ? (
) : null}
This is a simulated login screen, feel free to pick any username but you are restricted to two domains example.com and example.org. But this should allow you to test all combinations of your authentication and user modelling.
); }