Skip to content

Add anonymous session support to Login page #245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Add anonymous session support to Login page #245

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
88da04f
Initial plan
Copilot Oct 30, 2025
f6d47cb
Add anonymous sign-in support to Login page
Copilot Oct 30, 2025
36c272d
Fix button types to avoid form submission conflicts
Copilot Oct 30, 2025
edadb0f
Change Sign in anonymously button to pink outline variant
Copilot Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 48 additions & 4 deletions src/pages/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
FormErrorMessage,
FormLabel,
Heading,
HStack,
IconButton,
Input,
InputGroup,
Expand Down Expand Up @@ -125,6 +126,41 @@ export const Login = (props: { client: Client }): ReactElement => {
);
};

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({
title: "Anonymous session created.",
description: "You are now signed in anonymously.",
status: "success",
duration: 3000,
isClosable: true,
position: "top",
});
} catch (error) {
toast({
title: "Error creating anonymous session.",
description: `${error}`,
status: "error",
duration: 9000,
isClosable: true,
position: "top",
});
}
};

return (
<Center minH="100vh" p={2}>
<Container
Expand Down Expand Up @@ -177,18 +213,26 @@ export const Login = (props: { client: Client }): ReactElement => {
</InputGroup>
<FormErrorMessage>{errors.project?.message}</FormErrorMessage>
</FormControl>
<Box>
<HStack spacing={4} marginTop={4}>
<Button
colorScheme="pink"
isLoading={isSubmitting}
type="submit"
type="button"
size="lg"
marginTop={4}
onClick={handleSubmit(onContinueAsGuest)}
>
Continue as Guest
</Button>
</Box>
<Button
colorScheme="teal"
isLoading={isSubmitting}
type="button"
size="lg"
onClick={handleSubmit(onSignInAnonymously)}
>
Sign in anonymously
</Button>
Comment on lines +226 to +235
Copy link
Copy Markdown
Owner

@stnguyen90 stnguyen90 Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Contributor Author

Copilot AI Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Updated UI

</HStack>
<FormControl isInvalid={!!errors.email}>
<FormLabel htmlFor="email">Email</FormLabel>
<InputGroup>
Expand Down