Let your users sign in
with their Oasis identity

import Image from 'next/image';

function ContinueWithOasis({ clientId, redirectUri }: { clientId: string; redirectUri: string }) {
  const handleClick = async () => {
    const codeVerifier = generateRandomString(64);
    const codeChallenge = await base64url(sha256(codeVerifier));
    sessionStorage.setItem('pkce_verifier', codeVerifier);

    const url = new URL('https://oasisbio.oasiscompany.org/oauth/authorize');
    url.searchParams.set('client_id', clientId);
    url.searchParams.set('redirect_uri', redirectUri);
    url.searchParams.set('response_type', 'code');
    url.searchParams.set('scope', 'profile email');
    url.searchParams.set('state', generateRandomString(16));
    url.searchParams.set('code_challenge', codeChallenge);
    url.searchParams.set('code_challenge_method', 'S256');
    window.location.href = url.toString();
  };

  return (
    <button onClick={handleClick} style={{ display:'inline-flex', alignItems:'center', gap:10,
      padding:'10px 20px', background:'#000', color:'#fff', borderRadius:8,
      border:'none', cursor:'pointer', fontSize:15, fontWeight:500 }}>
      <Image src="https://oasisbio.oasiscompany.org/assets/oasis_logo.svg" width={20} height={17} alt="Oasis" />
      Continue with Oasis
    </button>
  );
}