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) => { 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
{/* Card */}

{!acsUrl ? 'SAML IdP Login' : 'SAML SSO Login'}

{!acsUrl && (

This is where we will post the SAML Response

)}

Any password works

{/* Info box */}

This is a simulated login screen. You may choose any username, but only the domains{' '} example.com and{' '} example.org are allowed.

); }