OAuth2 Session Not Persisting After Google Redirect - 401 Unauthorized

I'm implementing Google OAuth2 authentication in React using Appwrite SDK.
The flow is:

1. User clicks "Sign in with Google" button
2. Gets redirected to Google login
3. Google redirects back to success URL (http://localhost:5173)
4. I redirect to Profile page

Problem: When Profile component mounts and calls account.getSession('current'),
I get 401 Unauthorized with error: "User (role: guests) missing scopes (["account"])"

This indicates the session isn't being properly stored/recognized after the OAuth2 redirect.

My Current Code:

appwrite.js:

import { Client, Account, OAuthProvider } from "appwrite";

const client = new Client()
  .setEndpoint(import.meta.env.VITE_APPWRITE_ENDPOINT)
  .setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);

const account = new Account(client);
export { client, account, OAuthProvider };

login.jsx - handleGoogleLogin:

const handleGoogleLogin = () => {
  try {
    account.createOAuth2Session({
      provider: OAuthProvider.Google,
      success: "http://localhost:5173",
      failure: "http://localhost:5173/login"
    });
  } catch (err) {
    setError(err.message);
  }
};

profile.jsx - where the error occurs:

const getSession = async () => {
  const session = await account.getSession({
    sessionId: 'current'
  });
  console.log(session);
}

useEffect(() => {
  getSession();
}, []);

Console Error:

GET https://sgp.cloud.appwrite.io/v1/account/sessions/current 401 (Unauthorized)
AppwriteException: User (role: guests) missing scopes (["account"])

How to Fix