feat: add a "Continue with Google" button that links to doc in templates

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>
+}

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);
+  }
+}

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
+>

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;
+}

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>

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 {}

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>

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}
+    </>
+  );
+};

templates/nextjs-example/src/components/login.tsx → 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: {},

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>

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}
+    </>
+  );
+};