diff --git a/e2e/__screenshots__/nextjs-example/production/example.spec.ts/login-current-mode.png b/e2e/__screenshots__/nextjs-example/production/example.spec.ts/login-current-mode.png
index 3a82b62..d8d96c4 100644
Binary files a/e2e/__screenshots__/nextjs-example/production/example.spec.ts/login-current-mode.png and b/e2e/__screenshots__/nextjs-example/production/example.spec.ts/login-current-mode.png differ
diff --git a/e2e/__screenshots__/nextjs-example/production/example.spec.ts/logout-current-mode.png b/e2e/__screenshots__/nextjs-example/production/example.spec.ts/logout-current-mode.png
index 3a82b62..d8d96c4 100644
Binary files a/e2e/__screenshots__/nextjs-example/production/example.spec.ts/logout-current-mode.png and b/e2e/__screenshots__/nextjs-example/production/example.spec.ts/logout-current-mode.png differ
diff --git a/templates/angular-example/src/app/components/login-with-google/login-with-google.component.html b/templates/angular-example/src/app/components/login-with-google/login-with-google.component.html
new file mode 100644
index 0000000..2ffadfa
--- /dev/null
+++ b/templates/angular-example/src/app/components/login-with-google/login-with-google.component.html
@@ -0,0 +1,73 @@
+<app-button (click)="start()">Continue with Google</app-button>
+
+@if (showModal) {
+  <div
+    class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="modalTitle"
+  >
+    <div
+      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)]"
+    >
+      <div class="flex items-start justify-between">
+        <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">
+          Hey 👋
+        </h2>
+
+        <button
+          type="button"
+          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"
+          aria-label="Close"
+          (click)="close()"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M6 18L18 6M6 6l12 12"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <div class="mt-4">
+        <p class="pb-4">
+          You can sign in with Google... but it requires a little setup 😉
+        </p>
+
+        <p class="pb-1">
+          Check out the
+          <a
+            href="https://juno.build/docs/build/authentication/google"
+            rel="noopener noreferrer"
+            target="_blank"
+            class="hover:text-lavender-blue-500 active:text-lavender-blue-400 inline-flex items-center gap-1 underline"
+          >
+            Juno authentication docs
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="16px"
+              viewBox="0 -960 960 960"
+              width="16px"
+              fill="currentColor"
+            >
+              <path
+                d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z"
+              />
+            </svg>
+          </a>
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <app-backdrop></app-backdrop>
+}
diff --git a/templates/angular-example/src/app/components/login-with-google/login-with-google.component.ts b/templates/angular-example/src/app/components/login-with-google/login-with-google.component.ts
new file mode 100644
index 0000000..4cf6b30
--- /dev/null
+++ b/templates/angular-example/src/app/components/login-with-google/login-with-google.component.ts
@@ -0,0 +1,25 @@
+import { Component, signal } from '@angular/core';
+import { signIn } from '@junobuild/core';
+import { ButtonComponent } from '../button/button.component';
+import { BackdropComponent } from '../backdrop/backdrop.component';
+
+@Component({
+  selector: 'app-login-with-google',
+  imports: [ButtonComponent, BackdropComponent],
+  templateUrl: './login-with-google.component.html',
+})
+export class LoginComponentWithGoogle {
+  #showModal = signal(false);
+
+  get showModal(): boolean {
+    return this.#showModal();
+  }
+
+  start() {
+    this.#showModal.set(true);
+  }
+
+  close() {
+    this.#showModal.set(false);
+  }
+}
diff --git a/templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.html b/templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.html
new file mode 100644
index 0000000..8716297
--- /dev/null
+++ b/templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.html
@@ -0,0 +1,3 @@
+<app-button (click)="signIn({ internet_identity: {} })"
+  >Continue with Internet Identity</app-button
+>
diff --git a/templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.ts b/templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.ts
new file mode 100644
index 0000000..e8bc709
--- /dev/null
+++ b/templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { signIn } from '@junobuild/core';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-login-with-ii',
+  imports: [ButtonComponent],
+  templateUrl: './login-with-ii.component.html',
+})
+export class LoginComponentWithII {
+  readonly signIn = signIn;
+}
diff --git a/templates/angular-example/src/app/components/login/login.component.html b/templates/angular-example/src/app/components/login/login.component.html
index 3ebc919..ff7aa9b 100644
--- a/templates/angular-example/src/app/components/login/login.component.html
+++ b/templates/angular-example/src/app/components/login/login.component.html
@@ -1,7 +1,7 @@
 <div class="gap flex flex-col">
+  <app-login-with-google />
+
   <app-passkey />
 
-  <app-button (click)="signIn({ internet_identity: {} })"
-    >Continue with Internet Identity</app-button
-  >
+  <app-login-with-ii />
 </div>
diff --git a/templates/angular-example/src/app/components/login/login.component.ts b/templates/angular-example/src/app/components/login/login.component.ts
index c291b42..3a72e56 100644
--- a/templates/angular-example/src/app/components/login/login.component.ts
+++ b/templates/angular-example/src/app/components/login/login.component.ts
@@ -1,13 +1,11 @@
 import { Component } from '@angular/core';
-import { signIn } from '@junobuild/core';
-import { ButtonComponent } from '../button/button.component';
 import { PasskeyComponent } from '../passkey/passkey/passkey.component';
+import { LoginComponentWithII } from '../login-with-ii/login-with-ii.component';
+import { LoginComponentWithGoogle } from '../login-with-google/login-with-google.component';
 
 @Component({
   selector: 'app-login',
-  imports: [ButtonComponent, PasskeyComponent],
+  imports: [LoginComponentWithII, PasskeyComponent, LoginComponentWithGoogle],
   templateUrl: './login.component.html',
 })
-export class LoginComponent {
-  readonly signIn = signIn;
-}
+export class LoginComponent {}
diff --git a/templates/nextjs-example/src/components/auth.tsx b/templates/nextjs-example/src/components/auth.tsx
index d0ff02b..70f3178 100644
--- a/templates/nextjs-example/src/components/auth.tsx
+++ b/templates/nextjs-example/src/components/auth.tsx
@@ -1,8 +1,9 @@
-import { Login } from "@/components/login";
+import { LoginWithII } from "@/components/login-with-ii";
 import { Logout } from "@/components/logout";
 import { onAuthStateChange, type User } from "@junobuild/core";
 import { createContext, useEffect, useState, type ReactNode } from "react";
 import { Passkey } from "@/components/passkey/passkey";
+import { LoginWithGoogle } from "@/components/login-with-google";
 
 export const AuthContext = createContext<{ user: User | undefined | null }>({
   user: undefined,
@@ -35,8 +36,9 @@ export const Auth = ({ children }: AuthProps) => {
         </div>
       ) : (
         <div className="gap flex flex-col">
+          <LoginWithGoogle />
           <Passkey />
-          <Login />
+          <LoginWithII />
         </div>
       )}
     </AuthContext.Provider>
diff --git a/templates/nextjs-example/src/components/login-with-google.tsx b/templates/nextjs-example/src/components/login-with-google.tsx
new file mode 100644
index 0000000..c4644a5
--- /dev/null
+++ b/templates/nextjs-example/src/components/login-with-google.tsx
@@ -0,0 +1,94 @@
+import { Button } from "@/components/button";
+import { Backdrop } from "@/components/backdrop";
+import { useState } from "react";
+
+export const LoginWithGoogle = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const start = () => {
+    setShowModal(true);
+  };
+
+  const close = () => {
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      <Button onClick={start}>Continue with Google</Button>
+
+      {showModal ? (
+        <>
+          <div
+            className="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modalTitle"
+          >
+            <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)]">
+              <div className="flex items-start justify-between">
+                <h2
+                  id="modalTitle"
+                  className="text-xl font-bold text-gray-900 sm:text-2xl"
+                >
+                  Hey 👋
+                </h2>
+
+                <button
+                  type="button"
+                  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"
+                  aria-label="Close"
+                  onClick={close}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="size-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              <div className="mt-4">
+                <p className="pb-4">
+                  You can sign in with Google... but it requires a little setup
+                  😉
+                </p>
+
+                <p className="pb-1">
+                  Check out the{" "}
+                  <a
+                    href="https://juno.build/docs/build/authentication/google"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400 inline-flex items-center gap-1 underline"
+                  >
+                    Juno authentication docs{" "}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="16px"
+                      viewBox="0 -960 960 960"
+                      width="16px"
+                      fill="currentColor"
+                    >
+                      <path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" />
+                    </svg>
+                  </a>
+                </p>
+              </div>
+            </div>
+          </div>
+          <Backdrop />
+        </>
+      ) : null}
+    </>
+  );
+};
diff --git a/templates/nextjs-example/src/components/login.tsx b/templates/nextjs-example/src/components/login-with-ii.tsx
similarity index 88%
rename from templates/nextjs-example/src/components/login.tsx
rename to templates/nextjs-example/src/components/login-with-ii.tsx
index 7d447ed..834d835 100644
--- a/templates/nextjs-example/src/components/login.tsx
+++ b/templates/nextjs-example/src/components/login-with-ii.tsx
@@ -1,7 +1,7 @@
 import { Button } from "@/components/button";
 import { signIn } from "@junobuild/core";
 
-export const Login = () => {
+export const LoginWithII = () => {
   const signWithII = async () => {
     await signIn({
       internet_identity: {},
diff --git a/templates/react-example/src/components/Auth.jsx b/templates/react-example/src/components/Auth.jsx
index 322e776..ab43666 100644
--- a/templates/react-example/src/components/Auth.jsx
+++ b/templates/react-example/src/components/Auth.jsx
@@ -1,9 +1,10 @@
 import { onAuthStateChange } from "@junobuild/core";
 import PropTypes from "prop-types";
 import { createContext, useEffect, useState } from "react";
-import { Login } from "./Login";
+import { LoginWithII } from "./LoginWithII.jsx";
 import { Logout } from "./Logout";
 import { Passkey } from "./passkey/Passkey";
+import { LoginWithGoogle } from "./LoginWithGoogle.jsx";
 
 export const AuthContext = createContext();
 
@@ -26,8 +27,9 @@ export const Auth = ({ children }) => {
         </div>
       ) : (
         <div className="gap flex flex-col">
+          <LoginWithGoogle />
           <Passkey />
-          <Login />
+          <LoginWithII />
         </div>
       )}
     </AuthContext.Provider>
diff --git a/templates/react-example/src/components/LoginWithGoogle.jsx b/templates/react-example/src/components/LoginWithGoogle.jsx
new file mode 100644
index 0000000..380c893
--- /dev/null
+++ b/templates/react-example/src/components/LoginWithGoogle.jsx
@@ -0,0 +1,96 @@
+import { Button } from "./Button.jsx";
+import { useState } from "react";
+import { CreatePasskey } from "./passkey/CreatePasskey.jsx";
+import { UsePasskey } from "./passkey/UsePasskey.jsx";
+import { Backdrop } from "./Backdrop.jsx";
+
+export const LoginWithGoogle = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const start = () => {
+    setShowModal(true);
+  };
+
+  const close = () => {
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      <Button onClick={start}>Continue with Google</Button>
+
+      {showModal ? (
+        <>
+          <div
+            className="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modalTitle"
+          >
+            <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)]">
+              <div className="flex items-start justify-between">
+                <h2
+                  id="modalTitle"
+                  className="text-xl font-bold text-gray-900 sm:text-2xl"
+                >
+                  Hey 👋
+                </h2>
+
+                <button
+                  type="button"
+                  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"
+                  aria-label="Close"
+                  onClick={close}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="size-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              <div className="mt-4">
+                <p className="pb-4">
+                  You can sign in with Google... but it requires a little setup
+                  😉
+                </p>
+
+                <p className="pb-1">
+                  Check out the{" "}
+                  <a
+                    href="https://juno.build/docs/build/authentication/google"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400 inline-flex items-center gap-1 underline"
+                  >
+                    Juno authentication docs{" "}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="16px"
+                      viewBox="0 -960 960 960"
+                      width="16px"
+                      fill="currentColor"
+                    >
+                      <path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" />
+                    </svg>
+                  </a>
+                </p>
+              </div>
+            </div>
+          </div>
+          <Backdrop />
+        </>
+      ) : null}
+    </>
+  );
+};
diff --git a/templates/react-example/src/components/Login.jsx b/templates/react-example/src/components/LoginWithII.jsx
similarity index 88%
rename from templates/react-example/src/components/Login.jsx
rename to templates/react-example/src/components/LoginWithII.jsx
index 53e9e96..8ee652d 100644
--- a/templates/react-example/src/components/Login.jsx
+++ b/templates/react-example/src/components/LoginWithII.jsx
@@ -1,7 +1,7 @@
 import { signIn } from "@junobuild/core";
 import { Button } from "./Button";
 
-export const Login = () => {
+export const LoginWithII = () => {
   const signWithII = async () => {
     await signIn({
       internet_identity: {},
diff --git a/templates/react-ts-example/src/components/Auth.tsx b/templates/react-ts-example/src/components/Auth.tsx
index ea14a4c..ebcacd9 100644
--- a/templates/react-ts-example/src/components/Auth.tsx
+++ b/templates/react-ts-example/src/components/Auth.tsx
@@ -6,9 +6,10 @@ import {
   useEffect,
   useState,
 } from "react";
-import { Login } from "./Login";
+import { LoginWitII } from "./LoginWitII.tsx";
 import { Logout } from "./Logout";
 import { Passkey } from "./passkey/Passkey.tsx";
+import { LoginWithGoogle } from "./LoginWithGoogle.tsx";
 
 export const AuthContext = createContext<{ user: User | null }>({ user: null });
 
@@ -32,8 +33,9 @@ export const Auth: FC<PropsWithChildren> = (props) => {
         </div>
       ) : (
         <div className="gap flex flex-col">
+          <LoginWithGoogle />
           <Passkey />
-          <Login />
+          <LoginWitII />
         </div>
       )}
     </AuthContext.Provider>
diff --git a/templates/react-ts-example/src/components/Login.tsx b/templates/react-ts-example/src/components/LoginWitII.tsx
similarity index 88%
rename from templates/react-ts-example/src/components/Login.tsx
rename to templates/react-ts-example/src/components/LoginWitII.tsx
index d517442..17161de 100644
--- a/templates/react-ts-example/src/components/Login.tsx
+++ b/templates/react-ts-example/src/components/LoginWitII.tsx
@@ -2,7 +2,7 @@ import { signIn } from "@junobuild/core";
 import { FC } from "react";
 import { Button } from "./Button";
 
-export const Login: FC = () => {
+export const LoginWitII: FC = () => {
   const signWithII = async () => {
     await signIn({
       internet_identity: {},
diff --git a/templates/react-ts-example/src/components/LoginWithGoogle.tsx b/templates/react-ts-example/src/components/LoginWithGoogle.tsx
new file mode 100644
index 0000000..07e5fb2
--- /dev/null
+++ b/templates/react-ts-example/src/components/LoginWithGoogle.tsx
@@ -0,0 +1,94 @@
+import { FC, useState } from "react";
+import { Button } from "./Button";
+import { Backdrop } from "./Backdrop";
+
+export const LoginWithGoogle: FC = () => {
+  const [showModal, setShowModal] = useState(false);
+
+  const start = () => {
+    setShowModal(true);
+  };
+
+  const close = () => {
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      <Button onClick={start}>Continue with Google</Button>
+
+      {showModal ? (
+        <>
+          <div
+            className="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modalTitle"
+          >
+            <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)]">
+              <div className="flex items-start justify-between">
+                <h2
+                  id="modalTitle"
+                  className="text-xl font-bold text-gray-900 sm:text-2xl"
+                >
+                  Hey 👋
+                </h2>
+
+                <button
+                  type="button"
+                  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"
+                  aria-label="Close"
+                  onClick={close}
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="size-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+
+              <div className="mt-4">
+                <p className="pb-4">
+                  You can sign in with Google... but it requires a little setup
+                  😉
+                </p>
+
+                <p className="pb-1">
+                  Check out the{" "}
+                  <a
+                    href="https://juno.build/docs/build/authentication/google"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    className="hover:text-lavender-blue-500 active:text-lavender-blue-400 inline-flex items-center gap-1 underline"
+                  >
+                    Juno authentication docs{" "}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="16px"
+                      viewBox="0 -960 960 960"
+                      width="16px"
+                      fill="currentColor"
+                    >
+                      <path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" />
+                    </svg>
+                  </a>
+                </p>
+              </div>
+            </div>
+          </div>
+          <Backdrop />
+        </>
+      ) : null}
+    </>
+  );
+};
diff --git a/templates/sveltekit-example/src/lib/components/Auth.svelte b/templates/sveltekit-example/src/lib/components/Auth.svelte
index e172e4e..96a9e63 100644
--- a/templates/sveltekit-example/src/lib/components/Auth.svelte
+++ b/templates/sveltekit-example/src/lib/components/Auth.svelte
@@ -4,8 +4,9 @@
 	import { userStore } from '$lib/stores/user.store';
 	import { userSignedIn } from '$lib/derived/user.derived';
 	import Logout from '$lib/components/Logout.svelte';
-	import Login from '$lib/components/Login.svelte';
+	import LoginWithII from '$lib/components/LoginWithII.svelte';
 	import Passkey from '$lib/components/passkey/Passkey.svelte';
+	import LoginWithGoogle from '$lib/components/LoginWithGoogle.svelte';
 
 	interface Props {
 		children: Snippet;
@@ -32,8 +33,10 @@
 	</div>
 {:else}
 	<div class="gap flex flex-col">
+		<LoginWithGoogle />
+
 		<Passkey />
 
-		<Login />
+		<LoginWithII />
 	</div>
 {/if}
diff --git a/templates/sveltekit-example/src/lib/components/LoginWithGoogle.svelte b/templates/sveltekit-example/src/lib/components/LoginWithGoogle.svelte
new file mode 100644
index 0000000..194c202
--- /dev/null
+++ b/templates/sveltekit-example/src/lib/components/LoginWithGoogle.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import Button from '$lib/components/Button.svelte';
+	import Backdrop from '$lib/components/Backdrop.svelte';
+
+	let showModal = $state(false);
+
+	const start = async () => {
+		showModal = true;
+	};
+
+	const close = async () => {
+		showModal = false;
+	};
+</script>
+
+<Button onclick={start}>Continue with Google</Button>
+
+{#if showModal}
+	<div
+		class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="modalTitle"
+	>
+		<div
+			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)]"
+		>
+			<div class="flex items-start justify-between">
+				<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Hey 👋</h2>
+
+				<button
+					type="button"
+					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"
+					aria-label="Close"
+					onclick={close}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
+
+			<div class="mt-4">
+				<p class="pb-4">You can sign in with Google... but it requires a little setup 😉</p>
+
+				<p class="pb-1">
+					Check out the
+					<a
+						href="https://juno.build/docs/build/authentication/google"
+						rel="noopener noreferrer"
+						target="_blank"
+						class="hover:text-lavender-blue-500 active:text-lavender-blue-400 inline-flex items-center gap-1 underline"
+					>
+						Juno authentication docs
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							height="16px"
+							viewBox="0 -960 960 960"
+							width="16px"
+							fill="currentColor"
+						>
+							<path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" />
+						</svg>
+					</a>
+				</p>
+			</div>
+		</div>
+	</div>
+
+	<Backdrop />
+{/if}
diff --git a/templates/sveltekit-example/src/lib/components/Login.svelte b/templates/sveltekit-example/src/lib/components/LoginWithII.svelte
similarity index 100%
rename from templates/sveltekit-example/src/lib/components/Login.svelte
rename to templates/sveltekit-example/src/lib/components/LoginWithII.svelte
diff --git a/templates/vanilla-js-example/src/components/login-with-google.js b/templates/vanilla-js-example/src/components/login-with-google.js
new file mode 100644
index 0000000..88dc16c
--- /dev/null
+++ b/templates/vanilla-js-example/src/components/login-with-google.js
@@ -0,0 +1,91 @@
+import { addEventClick } from "../utils/utils.js";
+
+export const renderLoginWithGoogle = (app) => {
+  addEventClick({
+    target: app,
+    selector: "#loginWithGoogle",
+    fn: showModal,
+  });
+
+  return `<button id="loginWithGoogle"
+    class="flex w-fit  items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-xs py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]">
+    Continue with Google
+</button>
+
+<div id="wizard" class="contents"></div>
+`;
+};
+
+const closeModal = (modal) => (modal.innerHTML = "");
+
+const showModal = () => {
+  const modal = document.querySelector("#wizard");
+
+  addEventClick({
+    target: modal,
+    selector: "#closeModal",
+    fn: () => closeModal(modal),
+  });
+
+  modal.innerHTML = `<div class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44" role="dialog">
+      <div 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)]">
+          <div class="flex items-start justify-between">
+            <h2
+              id="modalTitle"
+              class="text-xl font-bold text-gray-900 sm:text-2xl"
+            >
+              Hey 👋
+            </h2>
+  
+            <button
+              type="button"
+              id="closeModal"
+              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"
+              aria-label="Close"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-5"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+          
+          <div class="mt-4">
+              <p class="pb-4">You can sign in with Google... but it requires a little setup 😉</p>
+  
+              <p class="pb-1">
+                  Check out the
+                  <a
+                    href="https://juno.build/docs/build/authentication/google"
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    class="hover:text-lavender-blue-500 active:text-lavender-blue-400 inline-flex items-center gap-1 underline"
+                  >
+                      Juno authentication docs
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="16px"
+                      viewBox="0 -960 960 960"
+                      width="16px"
+                      fill="currentColor"
+                    >
+                        <path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" />
+                    </svg>
+                  </a>
+              </p>
+          </div>
+        </div>
+    </div>
+
+    <div class="fixed inset-0 z-40 bg-white/30 dark:bg-lavender-blue-200/40 flex items-center justify-center backdrop-blur-xl"></div>`;
+};
diff --git a/templates/vanilla-js-example/src/components/login.js b/templates/vanilla-js-example/src/components/login-with-ii.js
similarity index 87%
rename from templates/vanilla-js-example/src/components/login.js
rename to templates/vanilla-js-example/src/components/login-with-ii.js
index 3c7ee5d..1bffdeb 100644
--- a/templates/vanilla-js-example/src/components/login.js
+++ b/templates/vanilla-js-example/src/components/login-with-ii.js
@@ -1,8 +1,9 @@
 import { signIn } from "@junobuild/core";
 import { addEventClick } from "../utils/utils";
 import { renderPasskey } from "./passkey.js";
+import { renderLoginWithGoogle } from "./login-with-google.js";
 
-export const renderLogin = (app) => {
+export const renderLoginWithII = (app) => {
   const signInWithII = async () => {
     await signIn({
       internet_identity: {},
@@ -16,6 +17,8 @@ export const renderLogin = (app) => {
   });
 
   app.innerHTML = `<div class="gap flex flex-col w-fit">
+    ${renderLoginWithGoogle(app)}
+
     ${renderPasskey(app)}
     
     <button id="login"
diff --git a/templates/vanilla-js-example/src/main.js b/templates/vanilla-js-example/src/main.js
index 05ab373..95f5324 100644
--- a/templates/vanilla-js-example/src/main.js
+++ b/templates/vanilla-js-example/src/main.js
@@ -1,6 +1,6 @@
 import { onAuthStateChange, initSatellite } from "@junobuild/core";
 import { renderContent } from "./components/content";
-import { renderLogin } from "./components/login";
+import { renderLoginWithII } from "./components/login-with-ii.js";
 import "./style.css";
 import { renderBanner } from "./components/banner.js";
 
@@ -11,7 +11,7 @@ onAuthStateChange((user) => {
   const app = document.querySelector("#app");
 
   if (user === null || user === undefined) {
-    renderLogin(app);
+    renderLoginWithII(app);
     return;
   }
 
diff --git a/templates/vue-example/src/components/Auth.vue b/templates/vue-example/src/components/Auth.vue
index 3406efa..3b58d01 100644
--- a/templates/vue-example/src/components/Auth.vue
+++ b/templates/vue-example/src/components/Auth.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/auth.store'
 import { storeToRefs } from 'pinia'
-import Login from './Login.vue'
+import LoginWithII from './LoginWithII.vue'
 import Passkey from './passkey/Passkey.vue'
 import Logout from './Logout.vue'
+import LoginWithGoogle from '@/components/LoginWithGoogle.vue'
 
 const store = useAuthStore()
 const { user } = storeToRefs(store)
@@ -20,9 +21,11 @@ const { user } = storeToRefs(store)
 
   <template v-else>
     <div class="gap flex flex-col">
+      <LoginWithGoogle />
+
       <Passkey />
 
-      <Login />
+      <LoginWithII />
     </div>
   </template>
 </template>
diff --git a/templates/vue-example/src/components/LoginWithGoogle.vue b/templates/vue-example/src/components/LoginWithGoogle.vue
new file mode 100644
index 0000000..2aade8c
--- /dev/null
+++ b/templates/vue-example/src/components/LoginWithGoogle.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import Button from '@/components/Button.vue'
+import Backdrop from '@/components/Backdrop.vue'
+
+const showModal = ref(false)
+
+const start = () => {
+  showModal.value = true
+}
+
+const close = () => {
+  showModal.value = false
+}
+</script>
+
+<template>
+  <Button @click="start">Continue with Google</Button>
+
+  <template v-if="showModal">
+    <div
+      class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modalTitle"
+    >
+      <div
+        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)]"
+      >
+        <div class="flex items-start justify-between">
+          <h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Hey 👋</h2>
+
+          <button
+            type="button"
+            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"
+            aria-label="Close"
+            @click="close"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="size-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div class="mt-4">
+          <p class="pb-4">You can sign in with Google... but it requires a little setup 😉</p>
+
+          <p class="pb-1">
+            Check out the
+            <a
+              href="https://juno.build/docs/build/authentication/google"
+              rel="noopener noreferrer"
+              target="_blank"
+              class="hover:text-lavender-blue-500 active:text-lavender-blue-400 inline-flex items-center gap-1 underline"
+            >
+              Juno authentication docs
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="16px"
+                viewBox="0 -960 960 960"
+                width="16px"
+                fill="currentColor"
+              >
+                <path d="m256-240-56-56 384-384H240v-80h480v480h-80v-344L256-240Z" />
+              </svg>
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <Backdrop />
+  </template>
+</template>
diff --git a/templates/vue-example/src/components/Login.vue b/templates/vue-example/src/components/LoginWithII.vue
similarity index 100%
rename from templates/vue-example/src/components/Login.vue
rename to templates/vue-example/src/components/LoginWithII.vue