Mock SAML Identity Provider

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 } = router.query; const [state, setState] = useState({ username: 'jackson', domain: 'example.com', acsUrl: 'https://jackson-demo.boxyhq.com/api/oauth/saml', audience: 'https://saml.boxyhq.com', }); const acsUrlInp = useRef(null); // Set focus to email input on load 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(); } }, []); 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(`/api/saml/auth`, { 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 newHtml = await response.text(); const newDoc = document.open('text/html', 'replace'); newDoc.write(newHtml); newDoc.close(); } else { document.write('Error in getting SAML response'); } }; return (

Mock SAML Identity Provider - Login

Login

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.

); }