Add anonymous session support to Login page

[Copilot]

Adds anonymous authentication via Appwrite's account.createAnonymousSession() API alongside existing email/password and guest modes.

Changes

• src/pages/Login.tsx
  • Added onSignInAnonymously handler that creates an Appwrite anonymous session, stores credentials in localStorage, and invalidates user query cache
  • Added "Sign in anonymously" button (pink outline) next to "Continue as Guest" button (pink solid) using HStack layout
  • Fixed button types from type="submit" to type="button" to prevent form submission conflicts

Implementation

const onSignInAnonymously = async (values: IFormInput) => {
  const { endpoint, project } = values;
  const { client } = props;

  client.setEndpoint(endpoint);
  client.setProject(project);

  const account = new Account(client);

  try {
    await account.createAnonymousSession();
    localStorage.setItem(LocalStorageKey.ENDPOINT, endpoint);
    localStorage.setItem(LocalStorageKey.PROJECT, project);
    queryClient.invalidateQueries(QueryKey.USER);
    toast({ /* success notification */ });
  } catch (error) {
    toast({ /* error notification */ });
  }
};

UI

The new button creates an actual Appwrite session unlike the guest mode which mocks user data locally.

Original prompt

Add anonymous sign-in support to the Login page in stnguyen90/appwrite-explorer.

Changes to make:

1. Update src/pages/Login.tsx to add an anonymous sign-in handler that calls account.createAnonymousSession(), stores endpoint and project in localStorage, invalidates QueryKey.USER, and shows toast on success/failure. Add a "Sign in anonymously" button next to the existing Sign in and Continue as Guest buttons (use existing handleSubmit wiring).
2. Ensure imports include any new Chakra components used (HStack) and maintain TypeScript types.
3. Keep existing behavior for email/password sign-in and guest continue.

Requirements:

• Follow the project's coding style and TypeScript types.
• Add unit tests are not required.
• Target branch: main (create a feature branch for the change).

Files to modify:

• src/pages/Login.tsx (replace with updated content to implement anonymous login)

Provide a Pull Request with a descriptive title and body describing the change and reasons.

This pull request was created as a result of the following prompt from Copilot chat.

Add anonymous sign-in support to the Login page in stnguyen90/appwrite-explorer.

Changes to make:

1. Update src/pages/Login.tsx to add an anonymous sign-in handler that calls account.createAnonymousSession(), stores endpoint and project in localStorage, invalidates QueryKey.USER, and shows toast on success/failure. Add a "Sign in anonymously" button next to the existing Sign in and Continue as Guest buttons (use existing handleSubmit wiring).
2. Ensure imports include any new Chakra components used (HStack) and maintain TypeScript types.
3. Keep existing behavior for email/password sign-in and guest continue.

Requirements:

• Follow the project's coding style and TypeScript types.
• Add unit tests are not required.
• Target branch: main (create a feature branch for the change).

Files to modify:

• src/pages/Login.tsx (replace with updated content to implement anonymous login)

Provide a Pull Request with a descriptive title and body describing the change and reasons.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[appwrite]

delete

Project ID: delete

Sites (1)

Site	Status	Logs	Preview	QR
appwrite-explorer 6895711300041d1f243c	Ready	View Logs	Preview URL

Tip

Build commands execute in runtime containers during deployment

[stnguyen90]

@copilot keep the same color scheme. make the variant outline.

[Copilot]

Done in edadb0f — changed to colorScheme="pink" with variant="outline".