Skip to content

feat: add Google sign-up option to Console #3104

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

Open
darkspirit2802 wants to merge 2 commits into
base: main
Choose a base branch
from
+50 −5
Open

feat: add Google sign-up option to Console #3104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e79e3c3
feat: add Google sign-up option to Console
darkspirit2802 Jul 2, 2026
2d1c137
feat: add Google sign-in option to login page
darkspirit2802 Jul 2, 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
6 changes: 3 additions & 3 deletions bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

27 changes: 25 additions & 2 deletions src/routes/(public)/(guest)/login/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,25 @@
scopes: ['read:user', 'user:email']
});
}
function onGoogleLogin() {
let url = window.location.origin;

if (page.url.searchParams) {
const redirect = page.url.searchParams.get('redirect');
page.url.searchParams.delete('redirect');
if (redirect) {
url = `${redirect}${page.url.search}`;
} else {
url = `${base}${page.url.search ?? ''}`;
}
}
sdk.forConsole.account.createOAuth2Session({
provider: OAuthProvider.Google,
success: window.location.origin + url,
failure: window.location.origin,
scopes: ['profile', 'email']
});
}
</script>

<svelte:head>
Expand All @@ -136,12 +155,16 @@
<Form onSubmit={login}>
<Layout.Stack>
{#if isCloud}
<div style:margin-bottom="var(--gap-s, 8px)">
<Layout.Stack gap="s">
<Button secondary fullWidth on:click={onGithubLogin} {disabled}>
<span class="icon-github" aria-hidden="true"></span>
<span class="text">Sign in with GitHub</span>
</Button>
</div>
<Button secondary fullWidth on:click={onGoogleLogin} {disabled}>
<span class="icon-google" aria-hidden="true"></span>
<span class="text">Sign in with Google</span>
</Button>
</Layout.Stack>
<span class="with-separators eyebrow-heading-3">or</span>
{/if}
<InputEmail
Expand Down
22 changes: 22 additions & 0 deletions src/routes/(public)/(guest)/register/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,22 @@
scopes: ['read:user', 'user:email']
});
}
function onGoogleLogin() {
let successUrl = window.location.origin;

if (page.url.searchParams.has('code')) {
successUrl += `?code=${page.url.searchParams.get('code')}`;
} else if (page.url.searchParams.has('campaign')) {
successUrl += `?campaign=${page.url.searchParams.get('campaign')}`;
}

sdk.forConsole.account.createOAuth2Session({
provider: OAuthProvider.Google,
success: successUrl,
failure: window.location.origin,
scopes: ['profile', 'email']
});
}
Comment on lines +124 to +139

@greptile-apps greptile-apps Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 Google OAuth is missing from the sign-in page

The login page (/login) only offers GitHub OAuth, so a user who registers with Google will find no matching sign-in option on the login page and will likely be confused or stranded. If the intent is to ship both pages together, the corresponding onGoogleLogin() handler and button need to be added to src/routes/(public)/(guest)/login/+page.svelte as well.

</script>

<svelte:head>
Expand All @@ -138,6 +154,12 @@
<span class="icon-github" aria-hidden="true"></span>
<span class="text">Sign up with GitHub</span>
</Button>
<div style:margin-top="var(--gap-s, 8px)">
<Button secondary fullWidth on:click={onGoogleLogin} {disabled}>
<span class="icon-google" aria-hidden="true"></span>

@greptile-apps greptile-apps Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P1 icon-google class has no prior usage in the codebase

Every other OAuth icon (icon-github) appears in five files, but icon-google is introduced here for the first time. The icon CSS is loaded globally from @appwrite.io/pink-icons via +layout.ts. If this class is not defined in the currently-pinned version of that package (0.25.0), the button renders with no icon — a silently broken UI. Since node_modules are not committed and the package is sourced from a private registry, the class availability cannot be verified from the diff alone. Please confirm icon-google is exported by @appwrite.io/pink-icons@0.25.0 before merging.

<span class="text">Sign up with Google</span>
</Button>
</div>
Comment on lines +157 to +162

@greptile-apps greptile-apps Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

P2 Spacing via nested div instead of Layout.Stack

The PR description says "Wrapped both OAuth buttons in a Layout.Stack for consistent spacing," but the implementation uses a raw <div style:margin-top> instead. Layout.Stack is already imported and used on this page (wrapping the full form), so a gap-based stack would be cleaner and consistent with the design system's intent. A <div> with an inline style bypasses the design token system and adds nesting that isn't necessary.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

</div>
<span class="with-separators eyebrow-heading-3">or</span>
{/if}
Expand Down