Particle Auth with Openfort

// Retrieve user info either through Particle's API, as is done here, or SDK
const { uuid, googleEmail: email, wallets } = await fetchUserInfo(user_uuid, idToken);
const evm_wallet = wallets.find(wallet => wallet.chain === "evm_chain");

const playerAccountAddress = await openfort.players.create({
	name: email,
	description: evm_wallet.publicAddress,
});

// Retrieve user info either through Particle's API, as is done here, or SDK
const { uuid, googleEmail: email, wallets } = await fetchUserInfo(user_uuid, idToken);
const evm_wallet = wallets.find(wallet => wallet.chain === "evm_chain");

const createSessionRequest: CreatePlayerSessionRequest = {
	playerId,
	address: sessionPubKey,
	chainId: 80001,
	validUntil: 281474976710655,
	validAfter: 0,
	policy: process.env.NEXTAUTH_OPENFORT_POLICY!,
	externalOwnerAddress: evm_wallet.publicAddress,
};

const playerSession = await openfort.players.createSession(createSessionRequest);

// Retrieve user info either through Particle's API, or SDK as is done here.
let openfortResp, toastId, auth = particle.auth.getUserInfo();

openfort.createSessionKey();
await openfort.saveSessionKey();

const res = await fetch("/api/register-session", {
	method: "POST",
	headers: { "Content-Type": "application/json", Authorization: `Bearer ${auth.token}` },
	body: JSON.stringify({ user_uuid: auth.uuid, sessionPubKey: openfort.sessionKey.address, player: playerId }),
});
const json = await res.json();

openfortResp = await openfort.sendSignatureSessionRequest(json.data.id, await rpc.signMessage(json.data.nextAction.payload.userOpHash));

const interaction: Interaction = {
	contract: process.env.NEXTAUTH_OPENFORT_CONTRACT!,
  functionName: "mint",
  functionArgs: [playerId],
};

// Retrieve user info either through Particle's API, as is done here, or SDK
const { uuid, wallets } = await fetchUserInfo(user_uuid, idToken);
const evm_wallet = wallets.find(wallet => wallet.chain === "evm_chain");

const interaction: Interaction = {
	contract: process.env.NEXTAUTH_OPENFORT_CONTRACT!,
	functionName: "mint",
	functionArgs: [playerId],
};

const createTransactionIntentRequest: CreateTransactionIntentRequest = {
	player: playerId,
	chainId: Number(process.env.NEXTAUTH_OPENFORT_CHAINID!),
	optimistic: true,
	interactions: [interaction],
	policy: process.env.NEXTAUTH_OPENFORT_POLICY!,
	externalOwnerAddress: evm_wallet.publicAddress,
};

const transactionIntent = await openfort.transactionIntents.create(createTransactionIntentRequest);

// Retrieve user info either through Particle's API, or SDK as is done here.
const authInfo = particle.auth.getUserInfo();

const res = await fetch("/api/collect-asset", {
	method: "POST",
	headers: { "Content-Type": "application/json", Authorization: `Bearer ${authInfo.token}` },
	body: JSON.stringify({ user_uuid: authInfo.uuid, player: playerId }),
});

const { data } = await res.json();

const payload = data.nextAction.payload.userOpHash;
const sessionKeyLoaded = await openfort.loadSessionKey();
const signedTransaction = sessionKeyLoaded ? openfort.signMessage(payload) : await new RPC(provider!).signMessage(payload);

    
openfortTransactionResponse = await openfort.sendSignatureTransactionIntentRequest(data.id, signedTransaction);

import { useEffect, useState } from 'react';
import { toast } from 'react-toastify';
import { CollectButton, RegisterButton } from '../components';
import { ParticleNetwork, ParticleProvider } from '@particle-network/auth';

function App() {
  const [particle, setParticle] = useState(null);
  const [provider, setProvider] = useState(null);
  const [playerId, setPlayerId] = useState(null);

  useEffect(() => {
    const initParticle = async () => {
      const newParticle = new ParticleNetwork({
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
        clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY,
        appId: process.env.NEXT_PUBLIC_APP_ID
      });
      setParticle(newParticle);
    };
    initParticle();
  }, []);

  const handleLogin = async () => {
    await particle.auth.login({ preferredAuthType: 'google' });
    setProvider(new ParticleProvider(particle.auth));
    validateToken();
  };

  const validateToken = async () => {
    const userInfo = particle?.auth.getUserInfo();

    const response = await fetch("/api/login", {
      method: "POST",
      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${userInfo.token}` },
      body: JSON.stringify({ user_uuid: userInfo.uuid })
    });

    if (response.status === 200) {
      const { player } = await response.json();
      setPlayerId(player);
      toast.success("JWT Verified");
    } else {
      setProvider(null);
      toast.error("JWT Validation Failed");
    }
  };

  return (
    <div className="App">
      {/* Logo and Sign-in Section */}
      {!provider ? (
        <button className="sign-button" onClick={handleLogin}>Sign in with Google</button>
      ) : (
        <div className="profile-card">
          <h2>{particle.auth.getUserInfo().name}</h2>
          <div className="action-buttons">
            {playerId && <RegisterButton playerId={playerId} particle={particle} provider={provider} logout={logout} uiConsole={uiConsole} />}
            <button onClick={() => uiConsole(particle.auth.getUserInfo())}>Get User Info</button>
            {playerId && <CollectButton playerId={playerId} particle={particle} provider={provider} logout={logout} uiConsole={uiConsole} />}
          </div>
        </div>
      )}
    </div>
  );
}

export default App;