passport-example-google.tsx

"use client";
import { useGoogleLogin } from "@react-oauth/google";
import { Passport } from "@0xpass/passport";
import { useCallback, useState } from "react";
import OTPInput from "./components/OTPInput";

export default function Home() {
  const [email, setEmail] = useState("");
  const [otp, setOtp] = useState("");
  const passport = new Passport();

  const handleOTPChange = useCallback((otp: any) => {
    setOtp(otp);
  }, []);

  const googleLogin = useGoogleLogin({
    flow: "auth-code",
    onSuccess: async (codeResponse) => {
      console.log(codeResponse.code);

      passport.getSession({
        scope_id: "1",
        verifier_type: "google",
        code: codeResponse.code,
        encrypted_content: codeResponse.code,
      });
    },
    onError: (errorResponse) => console.log(errorResponse),
  });

  return (
    <main className="flex space-y-5 flex-col items-center justify-between p-24">
      <button
        onClick={googleLogin}
        className="p-2 border border-1 border-black rounded"
      >
        Login with Google ✨
      </button>

      <div className="space-x-2">
        <input
          type="text"
          value={email}
          onChange={(e) => {
            setEmail(e.target.value);
          }}
          className="border border-1 rounded p-2 border-black mb-4"
        ></input>
        <button
          className="border border- 1rounded p-2 border-black mb-20"
          onClick={async () => {
            const response = await passport.sendOtp({
              scope_id: "1",
              channel_type: "mailto",
              encrypted_content: email,
            });

            console.log(response);
          }}
        >
          Send an OTP
        </button>

        <OTPInput length={6} onChange={handleOTPChange} />
        <button
          className="border border-1 rounded p-2 border-black w-full mt-10"
          onClick={async () => {
            const response = await passport.getSession({
              scope_id: "1",
              verifier_type: "mailto",
              code: otp,
              encrypted_content: otp,
            });

            console.log(response);
          }}
        >
          Submit OTP
        </button>
      </div>
    </main>
  );
}