Skip to content

Commit f4bca9a

Browse files
peterpeterparkergithub-actions[bot]
peterpeterparker
and
github-actions[bot]
authored
feat: add a "Continue with Google" button that links to doc in templates (#210)
* feat: add a "Continue with Google" button that links to doc in templates Signed-off-by: David Dal Busco <[email protected]> * feat: sign-in google react ts Signed-off-by: David Dal Busco <[email protected]> * feat: sign-in google nextjs Signed-off-by: David Dal Busco <[email protected]> * feat: sign-in google angular Signed-off-by: David Dal Busco <[email protected]> * feat: sign-in google svelte Signed-off-by: David Dal Busco <[email protected]> * feat: sign-in google vanilla Signed-off-by: David Dal Busco <[email protected]> * feat: sign-in google vue Signed-off-by: David Dal Busco <[email protected]> * 🤖 update snapshots --------- Signed-off-by: David Dal Busco <[email protected]> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
1 parent aeecaf0 commit f4bca9a

File tree

26 files changed

+693
-25
lines changed

26 files changed

+693
-25
lines changed

‎e2e/__screenshots__/nextjs-example/production/example.spec.ts/login-current-mode.png‎

1.98 KB
Loading

‎e2e/__screenshots__/nextjs-example/production/example.spec.ts/logout-current-mode.png‎

1.98 KB
Loading

‎templates/angular-example/src/app/components/login-with-google/login-with-google.component.html‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<app-button (click)="start()">Continue with Google</app-button>
2+
3+
@if (showModal) {
4+
<div
5+
class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
6+
role="dialog"
7+
aria-modal="true"
8+
aria-labelledby="modalTitle"
9+
>
10+
<div
11+
class="w-full max-w-md rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[5px_5px_0px_rgba(0,0,0,1)]"
12+
>
13+
<div class="flex items-start justify-between">
14+
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">
15+
Hey 👋
16+
</h2>
17+
18+
<button
19+
type="button"
20+
class="-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none"
21+
aria-label="Close"
22+
(click)="close()"
23+
>
24+
<svg
25+
xmlns="http://www.w3.org/2000/svg"
26+
class="size-5"
27+
fill="none"
28+
viewBox="0 0 24 24"
29+
stroke="currentColor"
30+
>
31+
<path
32+
stroke-linecap="round"
33+
stroke-linejoin="round"
34+
stroke-width="2"
35+
d="M6 18L18 6M6 6l12 12"
36+
/>
37+
</svg>
38+
</button>
39+
</div>
40+
41+
<div class="mt-4">
42+
<p class="pb-4">
43+
You can sign in with Google... but it requires a little setup 😉
44+
</p>
45+
46+
<p class="pb-1">
47+
Check out the
48+
<a
49+
href="https://juno.build/docs/build/authentication/google"
50+
rel="noopener noreferrer"
51+
target="_blank"
52+
class="hover:text-lavender-blue-500 active:text-lavender-blue-400 inline-flex items-center gap-1 underline"
53+
>
54+
Juno authentication docs
55+
<svg
56+
xmlns="http://www.w3.org/2000/svg"
57+
height="16px"
58+
viewBox="0 -960 960 960"
59+
width="16px"
60+
fill="currentColor"
61+
>
62+
<path
63+
d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z"
64+
/>
65+
</svg>
66+
</a>
67+
</p>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<app-backdrop></app-backdrop>
73+
}

‎templates/angular-example/src/app/components/login-with-google/login-with-google.component.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Component, signal } from '@angular/core';
2+
import { signIn } from '@junobuild/core';
3+
import { ButtonComponent } from '../button/button.component';
4+
import { BackdropComponent } from '../backdrop/backdrop.component';
5+
6+
@Component({
7+
selector: 'app-login-with-google',
8+
imports: [ButtonComponent, BackdropComponent],
9+
templateUrl: './login-with-google.component.html',
10+
})
11+
export class LoginComponentWithGoogle {
12+
#showModal = signal(false);
13+
14+
get showModal(): boolean {
15+
return this.#showModal();
16+
}
17+
18+
start() {
19+
this.#showModal.set(true);
20+
}
21+
22+
close() {
23+
this.#showModal.set(false);
24+
}
25+
}

‎templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<app-button (click)="signIn({ internet_identity: {} })"
2+
>Continue with Internet Identity</app-button
3+
>

‎templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component } from '@angular/core';
2+
import { signIn } from '@junobuild/core';
3+
import { ButtonComponent } from '../button/button.component';
4+
5+
@Component({
6+
selector: 'app-login-with-ii',
7+
imports: [ButtonComponent],
8+
templateUrl: './login-with-ii.component.html',
9+
})
10+
export class LoginComponentWithII {
11+
readonly signIn = signIn;
12+
}

‎templates/angular-example/src/app/components/login/login.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="gap flex flex-col">
2+
<app-login-with-google />
3+
24
<app-passkey />
35

4-
<app-button (click)="signIn({ internet_identity: {} })"
5-
>Continue with Internet Identity</app-button
6-
>
6+
<app-login-with-ii />
77
</div>

‎templates/angular-example/src/app/components/login/login.component.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { Component } from '@angular/core';
2-
import { signIn } from '@junobuild/core';
3-
import { ButtonComponent } from '../button/button.component';
42
import { PasskeyComponent } from '../passkey/passkey/passkey.component';
3+
import { LoginComponentWithII } from '../login-with-ii/login-with-ii.component';
4+
import { LoginComponentWithGoogle } from '../login-with-google/login-with-google.component';
55

66
@Component({
77
selector: 'app-login',
8-
imports: [ButtonComponent, PasskeyComponent],
8+
imports: [LoginComponentWithII, PasskeyComponent, LoginComponentWithGoogle],
99
templateUrl: './login.component.html',
1010
})
11-
export class LoginComponent {
12-
readonly signIn = signIn;
13-
}
11+
export class LoginComponent {}

‎templates/nextjs-example/src/components/auth.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { Login } from "@/components/login";
1+
import { LoginWithII } from "@/components/login-with-ii";
22
import { Logout } from "@/components/logout";
33
import { onAuthStateChange, type User } from "@junobuild/core";
44
import { createContext, useEffect, useState, type ReactNode } from "react";
55
import { Passkey } from "@/components/passkey/passkey";
6+
import { LoginWithGoogle } from "@/components/login-with-google";
67

78
export const AuthContext = createContext<{ user: User | undefined | null }>({
89
user: undefined,
@@ -35,8 +36,9 @@ export const Auth = ({ children }: AuthProps) => {
3536
</div>
3637
) : (
3738
<div className="gap flex flex-col">
39+
<LoginWithGoogle />
3840
<Passkey />
39-
<Login />
41+
<LoginWithII />
4042
</div>
4143
)}
4244
</AuthContext.Provider>

‎templates/nextjs-example/src/components/login-with-google.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import { Button } from "@/components/button";
2+
import { Backdrop } from "@/components/backdrop";
3+
import { useState } from "react";
4+
5+
export const LoginWithGoogle = () => {
6+
const [showModal, setShowModal] = useState(false);
7+
8+
const start = () => {
9+
setShowModal(true);
10+
};
11+
12+
const close = () => {
13+
setShowModal(false);
14+
};
15+
16+
return (
17+
<>
18+
<Button onClick={start}>Continue with Google</Button>
19+
20+
{showModal ? (
21+
<>
22+
<div
23+
className="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
24+
role="dialog"
25+
aria-modal="true"
26+
aria-labelledby="modalTitle"
27+
>
28+
<div className="w-full max-w-md rounded-sm border-[3px] border-black bg-white px-4 py-3 shadow-[5px_5px_0px_rgba(0,0,0,1)]">
29+
<div className="flex items-start justify-between">
30+
<h2
31+
id="modalTitle"
32+
className="text-xl font-bold text-gray-900 sm:text-2xl"
33+
>
34+
Hey 👋
35+
</h2>
36+
37+
<button
38+
type="button"
39+
className="-me-4 -mt-4 rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-50 hover:text-gray-600 focus:outline-none"
40+
aria-label="Close"
41+
onClick={close}
42+
>
43+
<svg
44+
xmlns="http://www.w3.org/2000/svg"
45+
className="size-5"
46+
fill="none"
47+
viewBox="0 0 24 24"
48+
stroke="currentColor"
49+
>
50+
<path
51+
strokeLinecap="round"
52+
strokeLinejoin="round"
53+
strokeWidth="2"
54+
d="M6 18L18 6M6 6l12 12"
55+
/>
56+
</svg>
57+
</button>
58+
</div>
59+
60+
<div className="mt-4">
61+
<p className="pb-4">
62+
You can sign in with Google... but it requires a little setup
63+
😉
64+
</p>
65+
66+
<p className="pb-1">
67+
Check out the{" "}
68+
<a
69+
href="https://juno.build/docs/build/authentication/google"
70+
rel="noopener noreferrer"
71+
target="_blank"
72+
className="hover:text-lavender-blue-500 active:text-lavender-blue-400 inline-flex items-center gap-1 underline"
73+
>
74+
Juno authentication docs{" "}
75+
<svg
76+
xmlns="http://www.w3.org/2000/svg"
77+
height="16px"
78+
viewBox="0 -960 960 960"
79+
width="16px"
80+
fill="currentColor"
81+
>
82+
<path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" />
83+
</svg>
84+
</a>
85+
</p>
86+
</div>
87+
</div>
88+
</div>
89+
<Backdrop />
90+
</>
91+
) : null}
92+
</>
93+
);
94+
};

0 commit comments

Comments
 (0)