index.js

import { useEffect } from 'react';
import { AppConfig, UserSession, showConnect } from '@stacks/connect';

const appConfig = new AppConfig(['store_write', 'publish_data']);
const userSession = new UserSession({ appConfig });

function authenticate() {
  showConnect({
    appDetails: {
      name: 'Stacksnet Tutorial',
      icon: window.location.origin + '/vercel.svg', // Optional: Change to your logo
    },
    redirectTo: '/',
    finished: () => {
      let userData = userSession.loadUserData();
      // Save or otherwise utilize userData post-authentication
      console.log('Finished sign-in with userData:', userData);
    },
    userSession: userSession,
  });
}

function checkPendingSignin() {
  if (userSession.isSignInPending()) {
    userSession.handlePendingSignIn().then(userData => {
      // Save or otherwise utilize userData post-authentication
      console.log('Finished pending sign-in with userData:', userData);
    });
  } else if (userSession.isUserSignedIn()) {
    // Handle case in which user is already authenticated
    console.log('User already authenticated');
  } else {
    console.log('No authed user or pending sign-in');
  }
}

export default function Home() {
  useEffect(checkPendingSignin, []);
  return (
    <button onClick={authenticate} style={{ padding: 6, margin: 20 }}>
      Log in with Stacks
    </button>
  );
}