From 77eeb1ec11a391bb65f4afb75485d42272978b47 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Sat, 7 Feb 2026 13:28:10 +0100 Subject: [PATCH 1/7] feat: use dev sign-in in all templates and remove all methods Signed-off-by: David Dal Busco --- templates/react-example/juno.config.mjs | 2 +- templates/react-example/package.json | 2 +- templates/react-example/src/App.jsx | 5 +- .../react-example/src/components/Auth.jsx | 8 +- .../react-example/src/components/Login.jsx | 13 ++ .../src/components/LoginWithGoogle.jsx | 96 -------------- .../src/components/LoginWithII.jsx | 12 -- .../src/components/passkey/CreatePasskey.jsx | 120 ------------------ .../src/components/passkey/Passkey.jsx | 95 -------------- .../src/components/passkey/Progress.jsx | 38 ------ .../src/components/passkey/UsePasskey.jsx | 78 ------------ 11 files changed, 19 insertions(+), 450 deletions(-) create mode 100644 templates/react-example/src/components/Login.jsx delete mode 100644 templates/react-example/src/components/LoginWithGoogle.jsx delete mode 100644 templates/react-example/src/components/LoginWithII.jsx delete mode 100644 templates/react-example/src/components/passkey/CreatePasskey.jsx delete mode 100644 templates/react-example/src/components/passkey/Passkey.jsx delete mode 100644 templates/react-example/src/components/passkey/Progress.jsx delete mode 100644 templates/react-example/src/components/passkey/UsePasskey.jsx diff --git a/templates/react-example/juno.config.mjs b/templates/react-example/juno.config.mjs index 62097f30..6d5b1fca 100644 --- a/templates/react-example/juno.config.mjs +++ b/templates/react-example/juno.config.mjs @@ -4,7 +4,7 @@ import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { ids: { - development: "", + development: "auamu-4x777-77775-aaaaa-cai", production: "", }, source: "dist", diff --git a/templates/react-example/package.json b/templates/react-example/package.json index 6f43fea3..77de9a54 100644 --- a/templates/react-example/package.json +++ b/templates/react-example/package.json @@ -13,7 +13,7 @@ "postinstall": "npm run postinstall:copy-auth" }, "dependencies": { - "@junobuild/core": "^3.4.0", + "@junobuild/core": "^5.0.0-next-2026-02-07.1", "@junobuild/functions": "^0.5.4", "nanoid": "^5.1.5", "react": "^19.2.1", diff --git a/templates/react-example/src/App.jsx b/templates/react-example/src/App.jsx index a3787cd2..4d331cf2 100644 --- a/templates/react-example/src/App.jsx +++ b/templates/react-example/src/App.jsx @@ -27,7 +27,7 @@ function App() { Example App

- Explore this demo app built with React, Tailwind, and{" "} + Try out this demo app to discover{" "} Juno - - , showcasing a practical application of these technologies. + .

diff --git a/templates/react-example/src/components/Auth.jsx b/templates/react-example/src/components/Auth.jsx index ab436669..26b55fcb 100644 --- a/templates/react-example/src/components/Auth.jsx +++ b/templates/react-example/src/components/Auth.jsx @@ -1,10 +1,8 @@ import { onAuthStateChange } from "@junobuild/core"; import PropTypes from "prop-types"; import { createContext, useEffect, useState } from "react"; -import { LoginWithII } from "./LoginWithII.jsx"; +import { Login } from "./Login.jsx"; import { Logout } from "./Logout"; -import { Passkey } from "./passkey/Passkey"; -import { LoginWithGoogle } from "./LoginWithGoogle.jsx"; export const AuthContext = createContext(); @@ -27,9 +25,7 @@ export const Auth = ({ children }) => { ) : (
- - - +
)} diff --git a/templates/react-example/src/components/Login.jsx b/templates/react-example/src/components/Login.jsx new file mode 100644 index 00000000..7bd02dbe --- /dev/null +++ b/templates/react-example/src/components/Login.jsx @@ -0,0 +1,13 @@ +import { signIn } from "@junobuild/core"; +import { Button } from "./Button"; + +export const Login = () => { + const signInWithDev = async () => { + // Sign in for local development and E2E only + await signIn({ + dev: {}, + }); + }; + + return ; +}; diff --git a/templates/react-example/src/components/LoginWithGoogle.jsx b/templates/react-example/src/components/LoginWithGoogle.jsx deleted file mode 100644 index 380c8934..00000000 --- a/templates/react-example/src/components/LoginWithGoogle.jsx +++ /dev/null @@ -1,96 +0,0 @@ -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 ( - <> - - - {showModal ? ( - <> -
-
-
-

- Hey 👋 -

- - -
- -
-

- You can sign in with Google... but it requires a little setup - 😉 -

- -

- Check out the{" "} - - Juno authentication docs{" "} - - - - -

-
-
-
- - - ) : null} - - ); -}; diff --git a/templates/react-example/src/components/LoginWithII.jsx b/templates/react-example/src/components/LoginWithII.jsx deleted file mode 100644 index 8ee652de..00000000 --- a/templates/react-example/src/components/LoginWithII.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { signIn } from "@junobuild/core"; -import { Button } from "./Button"; - -export const LoginWithII = () => { - const signWithII = async () => { - await signIn({ - internet_identity: {}, - }); - }; - - return ; -}; diff --git a/templates/react-example/src/components/passkey/CreatePasskey.jsx b/templates/react-example/src/components/passkey/CreatePasskey.jsx deleted file mode 100644 index 8a70010d..00000000 --- a/templates/react-example/src/components/passkey/CreatePasskey.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import { WebAuthnSignUpProgressStep, signUp } from "@junobuild/core"; -import { useEffect, useState } from "react"; -import { Button } from "../Button.jsx"; -import { Progress } from "./Progress.jsx"; -import PropTypes from "prop-types"; - -export const CreatePasskey = ({ - progress: wizardProgress, - onProgress: wizardOnProgress, -}) => { - const [progress, setProgress] = useState({ state: "init" }); - const [inputText, setInputText] = useState(""); - - const onProgress = (progress) => wizardOnProgress({ signUp: progress }); - - useEffect(() => { - if (wizardProgress === undefined) { - setProgress({ state: "init" }); - return; - } - - setProgress( - "signUp" in wizardProgress - ? { state: "progress", detail: wizardProgress.signUp } - : "setup" in wizardProgress - ? { state: "setup" } - : { state: "hidden" }, - ); - }, [wizardProgress]); - - const goToSetup = () => { - wizardOnProgress({ setup: null }); - }; - - const doSignUp = async () => { - try { - await signUp({ - webauthn: { - options: { - onProgress, - ...(inputText !== "" && { - passkey: { - user: { - displayName: inputText, - }, - }, - }), - }, - }, - }); - } catch (error) { - wizardOnProgress(undefined); - - // IRL the error would be gracefully displayed to the user unless - // it is one to ignore - for example when the user cancel the flow. - throw error; - } - }; - - return ( - <> - {progress.state === "init" ? ( - <> -

- First time here? Use your device (Face ID, Windows Hello, or screen - lock) to get in. -

- - - - ) : progress.state === "setup" ? ( - <> -

Want to give it a nickname so you'll spot it easily later?

- - { - setInputText(e.target.value); - }} - value={inputText} - > - - - - ) : progress.state === "progress" ? ( - - {progress?.detail.step === - WebAuthnSignUpProgressStep.CreatingUserCredential && ( - Creating user credential... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.ValidatingUserCredential && ( - Validating user credential... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.FinalizingCredential && ( - Finalizing credential... - )} - {progress?.detail.step === WebAuthnSignUpProgressStep.Signing && ( - Signing request.... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.FinalizingSession && ( - Finalizing session... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.RegisteringUser && ( - Registering user... - )} - - ) : null} - - ); -}; - -CreatePasskey.propTypes = { - progress: PropTypes.object.isRequired, - onProgress: PropTypes.func.isRequired, -}; diff --git a/templates/react-example/src/components/passkey/Passkey.jsx b/templates/react-example/src/components/passkey/Passkey.jsx deleted file mode 100644 index 704791cb..00000000 --- a/templates/react-example/src/components/passkey/Passkey.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import { useEffect, useState } from "react"; -import { isWebAuthnAvailable } from "@junobuild/core"; -import { Button } from "../Button.jsx"; -import { CreatePasskey } from "./CreatePasskey.jsx"; -import { UsePasskey } from "./UsePasskey.jsx"; -import { Backdrop } from "../Backdrop.jsx"; - -export const Passkey = () => { - // Default to true because we assume passkeys are nowadays most often supported - const [passkeySupported, setPasskeySupported] = useState(true); - - const [showModal, setShowModal] = useState(false); - const [progress, setProgress] = useState(undefined); - - useEffect(() => { - isWebAuthnAvailable().then((withWebAuthn) => - setPasskeySupported(withWebAuthn), - ); - }, []); - - const start = () => { - setProgress(undefined); - setShowModal(true); - }; - - const close = () => { - setShowModal(false); - setProgress(undefined); - }; - - const onProgress = (progress) => { - setProgress(progress); - }; - - return ( - <> - {passkeySupported && ( - - )} - - {showModal ? ( - <> -
-
- {(progress === undefined || "setup" in progress) && ( -
-

- Hey 👋 -

- - -
- )} - -
- - - -
-
-
- - - ) : null} - - ); -}; diff --git a/templates/react-example/src/components/passkey/Progress.jsx b/templates/react-example/src/components/passkey/Progress.jsx deleted file mode 100644 index 269ebaba..00000000 --- a/templates/react-example/src/components/passkey/Progress.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import PropTypes from "prop-types"; - -export const Progress = ({ children }) => { - return ( -
- - - - - -

{children}

-
- ); -}; - -Progress.propTypes = { - children: PropTypes.node.isRequired, -}; diff --git a/templates/react-example/src/components/passkey/UsePasskey.jsx b/templates/react-example/src/components/passkey/UsePasskey.jsx deleted file mode 100644 index 92f08f7a..00000000 --- a/templates/react-example/src/components/passkey/UsePasskey.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import { signIn, WebAuthnSignInProgressStep } from "@junobuild/core"; -import { useEffect, useState } from "react"; -import { Button } from "../Button.jsx"; -import { Progress } from "./Progress.jsx"; -import PropTypes from "prop-types"; - -export const UsePasskey = ({ - progress: wizardProgress, - onProgress: wizardOnProgress, -}) => { - const [progress, setProgress] = useState(undefined); - - const onProgress = (progress) => wizardOnProgress({ signIn: progress }); - - useEffect(() => { - if (wizardProgress === undefined) { - setProgress(undefined); - return; - } - - setProgress("signIn" in wizardProgress ? wizardProgress.signIn : null); - }, [wizardProgress]); - - const doSignIn = async () => { - try { - await signIn({ - webauthn: { - options: { onProgress }, - }, - }); - } catch (error) { - wizardOnProgress(undefined); - - // IRL the error would be gracefully displayed to the user unless - // it is one to ignore - for example when the user cancel the flow. - throw error; - } - }; - - return ( - <> - {progress === null ? ( - <> - ) : progress === undefined ? ( - <> -

Already got one set-up?

- - - - ) : ( - - {progress?.step === - WebAuthnSignInProgressStep.RequestingUserCredential && ( - Requesting user credential... - )} - {progress?.step === - WebAuthnSignInProgressStep.FinalizingCredential && ( - Finalizing credential... - )} - {progress?.step === WebAuthnSignInProgressStep.Signing && ( - Signing request... - )} - {progress?.step === WebAuthnSignInProgressStep.FinalizingSession && ( - Finalizing session... - )} - {progress?.step === WebAuthnSignInProgressStep.RetrievingUser && ( - Loading user... - )} - - )} - - ); -}; - -UsePasskey.propTypes = { - progress: PropTypes.object.isRequired, - onProgress: PropTypes.func.isRequired, -}; From d34faadd3f36ef8ff06448b0ed3fa8e6af29b88a Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Sat, 7 Feb 2026 19:45:16 +0100 Subject: [PATCH 2/7] feat: use dev sign-in Signed-off-by: David Dal Busco --- templates/angular-example/package.json | 4 +- .../app/components/home/home.component.html | 4 +- templates/angular-starter/package.json | 4 +- templates/astro-starter/package.json | 4 +- templates/nextjs-example/package.json | 8 +- templates/nextjs-example/src/app/page.tsx | 5 +- .../nextjs-example/src/components/auth.tsx | 8 +- .../src/components/login-with-google.tsx | 94 ------------- .../src/components/login-with-ii.tsx | 12 -- .../nextjs-example/src/components/login.tsx | 13 ++ .../src/components/passkey/create-passkey.tsx | 130 ------------------ .../src/components/passkey/passkey.tsx | 98 ------------- .../src/components/passkey/progress.tsx | 38 ----- .../src/components/passkey/use-passkey.tsx | 81 ----------- templates/nextjs-starter/package.json | 8 +- templates/react-example/juno.config.mjs | 2 +- templates/react-example/package.json | 8 +- templates/react-starter/package.json | 8 +- templates/react-ts-example/package.json | 8 +- templates/react-ts-example/src/App.tsx | 5 +- .../react-ts-example/src/components/Auth.tsx | 8 +- .../react-ts-example/src/components/Login.tsx | 14 ++ .../src/components/LoginWitII.tsx | 13 -- .../src/components/LoginWithGoogle.tsx | 94 ------------- .../src/components/passkey/CreatePasskey.tsx | 130 ------------------ .../src/components/passkey/Passkey.tsx | 98 ------------- .../src/components/passkey/Progress.tsx | 38 ----- .../src/components/passkey/UsePasskey.tsx | 81 ----------- templates/react-ts-starter/package.json | 8 +- templates/sveltekit-example/package.json | 8 +- .../src/routes/+layout.svelte | 4 +- templates/sveltekit-starter/package.json | 8 +- templates/vanilla-js-example/index.html | 4 +- templates/vanilla-js-example/package.json | 8 +- templates/vue-example/package.json | 8 +- templates/vue-example/src/App.vue | 4 +- templates/vue-starter/package.json | 8 +- 37 files changed, 94 insertions(+), 984 deletions(-) delete mode 100644 templates/nextjs-example/src/components/login-with-google.tsx delete mode 100644 templates/nextjs-example/src/components/login-with-ii.tsx create mode 100644 templates/nextjs-example/src/components/login.tsx delete mode 100644 templates/nextjs-example/src/components/passkey/create-passkey.tsx delete mode 100644 templates/nextjs-example/src/components/passkey/passkey.tsx delete mode 100644 templates/nextjs-example/src/components/passkey/progress.tsx delete mode 100644 templates/nextjs-example/src/components/passkey/use-passkey.tsx create mode 100644 templates/react-ts-example/src/components/Login.tsx delete mode 100644 templates/react-ts-example/src/components/LoginWitII.tsx delete mode 100644 templates/react-ts-example/src/components/LoginWithGoogle.tsx delete mode 100644 templates/react-ts-example/src/components/passkey/CreatePasskey.tsx delete mode 100644 templates/react-ts-example/src/components/passkey/Passkey.tsx delete mode 100644 templates/react-ts-example/src/components/passkey/Progress.tsx delete mode 100644 templates/react-ts-example/src/components/passkey/UsePasskey.tsx diff --git a/templates/angular-example/package.json b/templates/angular-example/package.json index 3948b4d3..91f6e3c8 100644 --- a/templates/angular-example/package.json +++ b/templates/angular-example/package.json @@ -23,8 +23,8 @@ "@angular/platform-browser": "^21.0.0", "@angular/platform-browser-dynamic": "^21.0.0", "@angular/router": "^21.0.0", - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "nanoid": "^5.1.5", "rxjs": "~7.8.2", "tslib": "^2.8.1", diff --git a/templates/angular-example/src/app/components/home/home.component.html b/templates/angular-example/src/app/components/home/home.component.html index b940f2bc..7fb8f1dd 100644 --- a/templates/angular-example/src/app/components/home/home.component.html +++ b/templates/angular-example/src/app/components/home/home.component.html @@ -10,7 +10,7 @@ Example App

- Explore this demo app built with Angular, Tailwind, and + Try out this demo app to discover Juno, showcasing a practical application of these technologies. + >.

diff --git a/templates/angular-starter/package.json b/templates/angular-starter/package.json index 21ab6ca9..d4a8cf17 100644 --- a/templates/angular-starter/package.json +++ b/templates/angular-starter/package.json @@ -23,8 +23,8 @@ "@angular/platform-browser": "^21.0.0", "@angular/platform-browser-dynamic": "^21.0.0", "@angular/router": "^21.0.0", - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "rxjs": "~7.8.2", "tslib": "^2.8.1", "zone.js": "^0.15.1" diff --git a/templates/astro-starter/package.json b/templates/astro-starter/package.json index f9d9cf2f..6b542119 100644 --- a/templates/astro-starter/package.json +++ b/templates/astro-starter/package.json @@ -15,8 +15,8 @@ "@astrojs/mdx": "^4.3.12", "@astrojs/rss": "^4.0.14", "@astrojs/sitemap": "^3.6.0", - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@tailwindcss/vite": "^4.1.17", "astro": "^5.16.0", "prettier": "^3.6.2", diff --git a/templates/nextjs-example/package.json b/templates/nextjs-example/package.json index 0dd9387c..2e763443 100644 --- a/templates/nextjs-example/package.json +++ b/templates/nextjs-example/package.json @@ -12,16 +12,16 @@ "postinstall": "npm run postinstall:copy-auth" }, "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "nanoid": "^5.1.5", "next": "16.0.7", "react": "19.2.1", "react-dom": "19.2.1" }, "devDependencies": { - "@junobuild/config": "^2.9.0", - "@junobuild/nextjs-plugin": "^4.5.0", + "@junobuild/config": "^2.10.1", + "@junobuild/nextjs-plugin": "^4.7.0", "@next/eslint-plugin-next": "16.0.0", "@tailwindcss/postcss": "^4.1.13", "@types/node": "^24", diff --git a/templates/nextjs-example/src/app/page.tsx b/templates/nextjs-example/src/app/page.tsx index e5993421..6299098b 100644 --- a/templates/nextjs-example/src/app/page.tsx +++ b/templates/nextjs-example/src/app/page.tsx @@ -29,7 +29,7 @@ export default function Home() { Example App

- Explore this demo app built with Next.js, Tailwind, and{" "} + Try out this demo app to discover{" "} Juno - - , showcasing a practical application of these technologies. + .

diff --git a/templates/nextjs-example/src/components/auth.tsx b/templates/nextjs-example/src/components/auth.tsx index 70f31780..4bfd56d2 100644 --- a/templates/nextjs-example/src/components/auth.tsx +++ b/templates/nextjs-example/src/components/auth.tsx @@ -1,9 +1,7 @@ -import { LoginWithII } from "@/components/login-with-ii"; +import { Login } from "@/components/login"; 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, @@ -36,9 +34,7 @@ export const Auth = ({ children }: AuthProps) => { ) : (
- - - +
)} diff --git a/templates/nextjs-example/src/components/login-with-google.tsx b/templates/nextjs-example/src/components/login-with-google.tsx deleted file mode 100644 index c4644a59..00000000 --- a/templates/nextjs-example/src/components/login-with-google.tsx +++ /dev/null @@ -1,94 +0,0 @@ -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 ( - <> - - - {showModal ? ( - <> -
-
-
-

- Hey 👋 -

- - -
- -
-

- You can sign in with Google... but it requires a little setup - 😉 -

- -

- Check out the{" "} - - Juno authentication docs{" "} - - - - -

-
-
-
- - - ) : null} - - ); -}; diff --git a/templates/nextjs-example/src/components/login-with-ii.tsx b/templates/nextjs-example/src/components/login-with-ii.tsx deleted file mode 100644 index 834d8354..00000000 --- a/templates/nextjs-example/src/components/login-with-ii.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Button } from "@/components/button"; -import { signIn } from "@junobuild/core"; - -export const LoginWithII = () => { - const signWithII = async () => { - await signIn({ - internet_identity: {}, - }); - }; - - return ; -}; diff --git a/templates/nextjs-example/src/components/login.tsx b/templates/nextjs-example/src/components/login.tsx new file mode 100644 index 00000000..a317aea6 --- /dev/null +++ b/templates/nextjs-example/src/components/login.tsx @@ -0,0 +1,13 @@ +import { Button } from "@/components/button"; +import { signIn } from "@junobuild/core"; + +export const Login = () => { + const signInWithDev = async () => { + // Sign in for local development and E2E only + await signIn({ + dev: {}, + }); + }; + + return ; +}; diff --git a/templates/nextjs-example/src/components/passkey/create-passkey.tsx b/templates/nextjs-example/src/components/passkey/create-passkey.tsx deleted file mode 100644 index fdb6ee37..00000000 --- a/templates/nextjs-example/src/components/passkey/create-passkey.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { Button } from "@/components/button"; -import { - WebAuthnSignUpProgressStep, - type SignProgress, - type SignProgressFn, - signUp, -} from "@junobuild/core"; -import { useEffect, useState } from "react"; -import { Progress } from "@/components/passkey/progress"; -import { PasskeyProps } from "@/types/passkey"; - -type ProgressSignUp = - | { - state: "init" | "setup" | "hidden"; - } - | { - state: "progress"; - detail: SignProgress; - }; - -export const CreatePasskey = ({ - progress: wizardProgress, - onProgress: wizardOnProgress, -}: PasskeyProps) => { - const [progress, setProgress] = useState({ state: "init" }); - const [inputText, setInputText] = useState(""); - - const onProgress: SignProgressFn = (progress) => - wizardOnProgress({ signUp: progress }); - - useEffect(() => { - if (wizardProgress === undefined) { - setProgress({ state: "init" }); - return; - } - - setProgress( - "signUp" in wizardProgress - ? { state: "progress", detail: wizardProgress.signUp } - : "setup" in wizardProgress - ? { state: "setup" } - : { state: "hidden" }, - ); - }, [wizardProgress]); - - const goToSetup = () => { - wizardOnProgress({ setup: null }); - }; - - const doSignUp = async () => { - try { - await signUp({ - webauthn: { - options: { - onProgress, - ...(inputText !== "" && { - passkey: { - user: { - displayName: inputText, - }, - }, - }), - }, - }, - }); - } catch (error: unknown) { - wizardOnProgress(undefined); - - // IRL the error would be gracefully displayed to the user unless - // it is one to ignore - for example when the user cancel the flow. - throw error; - } - }; - - return ( - <> - {progress.state === "init" ? ( - <> -

- First time here? Use your device (Face ID, Windows Hello, or screen - lock) to get in. -

- - - - ) : progress.state === "setup" ? ( - <> -

Want to give it a nickname so you'll spot it easily later?

- - { - setInputText(e.target.value); - }} - value={inputText} - > - - - - ) : progress.state === "progress" ? ( - - {progress?.detail.step === - WebAuthnSignUpProgressStep.CreatingUserCredential && ( - Creating user credential... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.ValidatingUserCredential && ( - Validating user credential... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.FinalizingCredential && ( - Finalizing credential... - )} - {progress?.detail.step === WebAuthnSignUpProgressStep.Signing && ( - Signing request.... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.FinalizingSession && ( - Finalizing session... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.RegisteringUser && ( - Registering user... - )} - - ) : null} - - ); -}; diff --git a/templates/nextjs-example/src/components/passkey/passkey.tsx b/templates/nextjs-example/src/components/passkey/passkey.tsx deleted file mode 100644 index 2d4e98db..00000000 --- a/templates/nextjs-example/src/components/passkey/passkey.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Button } from "@/components/button"; -import { useEffect, useState } from "react"; -import { Backdrop } from "@/components/backdrop"; -import { UsePasskey } from "@/components/passkey/use-passkey"; -import { PasskeyProgress } from "@/types/passkey"; -import { CreatePasskey } from "@/components/passkey/create-passkey"; -import { isWebAuthnAvailable } from "@junobuild/core"; - -export const Passkey = () => { - // Default to true because we assume passkeys are nowadays most often supported - const [passkeySupported, setPasskeySupported] = useState(true); - - const [showModal, setShowModal] = useState(false); - const [progress, setProgress] = useState( - undefined, - ); - - useEffect(() => { - isWebAuthnAvailable().then((withWebAuthn) => - setPasskeySupported(withWebAuthn), - ); - }, []); - - const start = () => { - setProgress(undefined); - setShowModal(true); - }; - - const close = () => { - setShowModal(false); - setProgress(undefined); - }; - - const onProgress = (progress: PasskeyProgress | undefined) => { - setProgress(progress); - }; - - return ( - <> - {passkeySupported && ( - - )} - - {showModal ? ( - <> -
-
- {(progress === undefined || "setup" in progress) && ( -
-

- Hey 👋 -

- - -
- )} - -
- - - -
-
-
- - - ) : null} - - ); -}; diff --git a/templates/nextjs-example/src/components/passkey/progress.tsx b/templates/nextjs-example/src/components/passkey/progress.tsx deleted file mode 100644 index cd3e6899..00000000 --- a/templates/nextjs-example/src/components/passkey/progress.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { ReactNode } from "react"; - -interface ProgressProps { - children: ReactNode; -} - -export const Progress = ({ children }: ProgressProps) => { - return ( -
- - - - - -

{children}

-
- ); -}; diff --git a/templates/nextjs-example/src/components/passkey/use-passkey.tsx b/templates/nextjs-example/src/components/passkey/use-passkey.tsx deleted file mode 100644 index 289541eb..00000000 --- a/templates/nextjs-example/src/components/passkey/use-passkey.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { Button } from "@/components/button"; -import { - signIn, - WebAuthnSignInProgressStep, - type SignProgress, - type SignProgressFn, -} from "@junobuild/core"; -import { useEffect, useState } from "react"; -import { Progress } from "@/components/passkey/progress"; -import { PasskeyProps } from "@/types/passkey"; - -export const UsePasskey = ({ - progress: wizardProgress, - onProgress: wizardOnProgress, -}: PasskeyProps) => { - const [progress, setProgress] = useState< - SignProgress | undefined | null - >(undefined); - - const onProgress: SignProgressFn = (progress) => - wizardOnProgress({ signIn: progress }); - - useEffect(() => { - if (wizardProgress === undefined) { - setProgress(undefined); - return; - } - - setProgress("signIn" in wizardProgress ? wizardProgress.signIn : null); - }, [wizardProgress]); - - const doSignIn = async () => { - try { - await signIn({ - webauthn: { - options: { onProgress }, - }, - }); - } catch (error: unknown) { - wizardOnProgress(undefined); - - // IRL the error would be gracefully displayed to the user unless - // it is one to ignore - for example when the user cancel the flow. - throw error; - } - }; - - return ( - <> - {progress === null ? ( - <> - ) : progress === undefined ? ( - <> -

Already got one set-up?

- - - - ) : ( - - {progress?.step === - WebAuthnSignInProgressStep.RequestingUserCredential && ( - Requesting user credential... - )} - {progress?.step === - WebAuthnSignInProgressStep.FinalizingCredential && ( - Finalizing credential... - )} - {progress?.step === WebAuthnSignInProgressStep.Signing && ( - Signing request... - )} - {progress?.step === WebAuthnSignInProgressStep.FinalizingSession && ( - Finalizing session... - )} - {progress?.step === WebAuthnSignInProgressStep.RetrievingUser && ( - Loading user... - )} - - )} - - ); -}; diff --git a/templates/nextjs-starter/package.json b/templates/nextjs-starter/package.json index c6be2c55..4eddac5b 100644 --- a/templates/nextjs-starter/package.json +++ b/templates/nextjs-starter/package.json @@ -12,15 +12,15 @@ "postinstall": "npm run postinstall:copy-auth" }, "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "next": "16.0.7", "react": "19.2.1", "react-dom": "19.2.1" }, "devDependencies": { - "@junobuild/config": "^2.9.0", - "@junobuild/nextjs-plugin": "^4.5.0", + "@junobuild/config": "^2.10.1", + "@junobuild/nextjs-plugin": "^4.7.0", "@tailwindcss/postcss": "^4.1.13", "@types/node": "^24", "@types/react": "19.2.7", diff --git a/templates/react-example/juno.config.mjs b/templates/react-example/juno.config.mjs index 6d5b1fca..62097f30 100644 --- a/templates/react-example/juno.config.mjs +++ b/templates/react-example/juno.config.mjs @@ -4,7 +4,7 @@ import { defineConfig } from "@junobuild/config"; export default defineConfig({ satellite: { ids: { - development: "auamu-4x777-77775-aaaaa-cai", + development: "", production: "", }, source: "dist", diff --git a/templates/react-example/package.json b/templates/react-example/package.json index 77de9a54..07c79ee6 100644 --- a/templates/react-example/package.json +++ b/templates/react-example/package.json @@ -13,16 +13,16 @@ "postinstall": "npm run postinstall:copy-auth" }, "dependencies": { - "@junobuild/core": "^5.0.0-next-2026-02-07.1", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "nanoid": "^5.1.5", "react": "^19.2.1", "react-dom": "^19.2.1" }, "devDependencies": { "@eslint/js": "^9.34.0", - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/vite": "^4.1.13", "@types/react": "^19.2.7", diff --git a/templates/react-starter/package.json b/templates/react-starter/package.json index 85248438..c2d52b61 100644 --- a/templates/react-starter/package.json +++ b/templates/react-starter/package.json @@ -13,15 +13,15 @@ "postinstall": "npm run postinstall:copy-auth" }, "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "react": "^19.2.1", "react-dom": "^19.2.1" }, "devDependencies": { "@eslint/js": "^9.34.0", - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/vite": "^4.1.13", "@types/react": "^19.2.7", diff --git a/templates/react-ts-example/package.json b/templates/react-ts-example/package.json index 94ea7fff..46bbdc43 100644 --- a/templates/react-ts-example/package.json +++ b/templates/react-ts-example/package.json @@ -13,16 +13,16 @@ "postinstall": "npm run postinstall:copy-auth" }, "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "nanoid": "^5.1.5", "react": "^19.2.1", "react-dom": "^19.2.1" }, "devDependencies": { "@eslint/js": "^9.34.0", - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/vite": "^4.1.13", "@types/react": "^19.2.7", diff --git a/templates/react-ts-example/src/App.tsx b/templates/react-ts-example/src/App.tsx index 4443980f..3bbdb530 100644 --- a/templates/react-ts-example/src/App.tsx +++ b/templates/react-ts-example/src/App.tsx @@ -27,7 +27,7 @@ const App: FC = () => { Example App

- Explore this demo app built with React, Tailwind, and{" "} + Try out this demo app to discover{" "} { className="underline" > Juno - - , showcasing a practical application of these technologies. + .

diff --git a/templates/react-ts-example/src/components/Auth.tsx b/templates/react-ts-example/src/components/Auth.tsx index ebcacd90..d73275b5 100644 --- a/templates/react-ts-example/src/components/Auth.tsx +++ b/templates/react-ts-example/src/components/Auth.tsx @@ -6,10 +6,8 @@ import { useEffect, useState, } from "react"; -import { LoginWitII } from "./LoginWitII.tsx"; +import { Login } from "./Login.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 }); @@ -33,9 +31,7 @@ export const Auth: FC = (props) => { ) : (
- - - +
)} diff --git a/templates/react-ts-example/src/components/Login.tsx b/templates/react-ts-example/src/components/Login.tsx new file mode 100644 index 00000000..8a9ce0d9 --- /dev/null +++ b/templates/react-ts-example/src/components/Login.tsx @@ -0,0 +1,14 @@ +import { signIn } from "@junobuild/core"; +import { FC } from "react"; +import { Button } from "./Button"; + +export const Login: FC = () => { + const signInWithDev = async () => { + // Sign in for local development and E2E only + await signIn({ + dev: {}, + }); + }; + + return ; +}; diff --git a/templates/react-ts-example/src/components/LoginWitII.tsx b/templates/react-ts-example/src/components/LoginWitII.tsx deleted file mode 100644 index 17161de8..00000000 --- a/templates/react-ts-example/src/components/LoginWitII.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { signIn } from "@junobuild/core"; -import { FC } from "react"; -import { Button } from "./Button"; - -export const LoginWitII: FC = () => { - const signWithII = async () => { - await signIn({ - internet_identity: {}, - }); - }; - - return ; -}; diff --git a/templates/react-ts-example/src/components/LoginWithGoogle.tsx b/templates/react-ts-example/src/components/LoginWithGoogle.tsx deleted file mode 100644 index 07e5fb2d..00000000 --- a/templates/react-ts-example/src/components/LoginWithGoogle.tsx +++ /dev/null @@ -1,94 +0,0 @@ -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 ( - <> - - - {showModal ? ( - <> -
-
-
-

- Hey 👋 -

- - -
- -
-

- You can sign in with Google... but it requires a little setup - 😉 -

- -

- Check out the{" "} - - Juno authentication docs{" "} - - - - -

-
-
-
- - - ) : null} - - ); -}; diff --git a/templates/react-ts-example/src/components/passkey/CreatePasskey.tsx b/templates/react-ts-example/src/components/passkey/CreatePasskey.tsx deleted file mode 100644 index e8d1cf8b..00000000 --- a/templates/react-ts-example/src/components/passkey/CreatePasskey.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { Button } from "../Button.tsx"; -import { - WebAuthnSignUpProgressStep, - type SignProgress, - type SignProgressFn, - signUp, -} from "@junobuild/core"; -import { useEffect, useState } from "react"; -import { Progress } from "./Progress.tsx"; -import type { PasskeyProps } from "../../types/passkey.ts"; - -type ProgressSignUp = - | { - state: "init" | "setup" | "hidden"; - } - | { - state: "progress"; - detail: SignProgress; - }; - -export const CreatePasskey = ({ - progress: wizardProgress, - onProgress: wizardOnProgress, -}: PasskeyProps) => { - const [progress, setProgress] = useState({ state: "init" }); - const [inputText, setInputText] = useState(""); - - const onProgress: SignProgressFn = (progress) => - wizardOnProgress({ signUp: progress }); - - useEffect(() => { - if (wizardProgress === undefined) { - setProgress({ state: "init" }); - return; - } - - setProgress( - "signUp" in wizardProgress - ? { state: "progress", detail: wizardProgress.signUp } - : "setup" in wizardProgress - ? { state: "setup" } - : { state: "hidden" }, - ); - }, [wizardProgress]); - - const goToSetup = () => { - wizardOnProgress({ setup: null }); - }; - - const doSignUp = async () => { - try { - await signUp({ - webauthn: { - options: { - onProgress, - ...(inputText !== "" && { - passkey: { - user: { - displayName: inputText, - }, - }, - }), - }, - }, - }); - } catch (error: unknown) { - wizardOnProgress(undefined); - - // IRL the error would be gracefully displayed to the user unless - // it is one to ignore - for example when the user cancel the flow. - throw error; - } - }; - - return ( - <> - {progress.state === "init" ? ( - <> -

- First time here? Use your device (Face ID, Windows Hello, or screen - lock) to get in. -

- - - - ) : progress.state === "setup" ? ( - <> -

Want to give it a nickname so you'll spot it easily later?

- - { - setInputText(e.target.value); - }} - value={inputText} - > - - - - ) : progress.state === "progress" ? ( - - {progress?.detail.step === - WebAuthnSignUpProgressStep.CreatingUserCredential && ( - Creating user credential... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.ValidatingUserCredential && ( - Validating user credential... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.FinalizingCredential && ( - Finalizing credential... - )} - {progress?.detail.step === WebAuthnSignUpProgressStep.Signing && ( - Signing request.... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.FinalizingSession && ( - Finalizing session... - )} - {progress?.detail.step === - WebAuthnSignUpProgressStep.RegisteringUser && ( - Registering user... - )} - - ) : null} - - ); -}; diff --git a/templates/react-ts-example/src/components/passkey/Passkey.tsx b/templates/react-ts-example/src/components/passkey/Passkey.tsx deleted file mode 100644 index 7eda62f6..00000000 --- a/templates/react-ts-example/src/components/passkey/Passkey.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { useEffect, useState } from "react"; -import { isWebAuthnAvailable } from "@junobuild/core"; -import { Button } from "../Button.tsx"; -import { Backdrop } from "../Backdrop.tsx"; -import { UsePasskey } from "./UsePasskey.tsx"; -import { CreatePasskey } from "./CreatePasskey.tsx"; -import type { PasskeyProgress } from "../../types/passkey.ts"; - -export const Passkey = () => { - // Default to true because we assume passkeys are nowadays most often supported - const [passkeySupported, setPasskeySupported] = useState(true); - - const [showModal, setShowModal] = useState(false); - const [progress, setProgress] = useState( - undefined, - ); - - useEffect(() => { - isWebAuthnAvailable().then((withWebAuthn) => - setPasskeySupported(withWebAuthn), - ); - }, []); - - const start = () => { - setProgress(undefined); - setShowModal(true); - }; - - const close = () => { - setShowModal(false); - setProgress(undefined); - }; - - const onProgress = (progress: PasskeyProgress | undefined) => { - setProgress(progress); - }; - - return ( - <> - {passkeySupported && ( - - )} - - {showModal ? ( - <> -
-
- {(progress === undefined || "setup" in progress) && ( -
-

- Hey 👋 -

- - -
- )} - -
- - - -
-
-
- - - ) : null} - - ); -}; diff --git a/templates/react-ts-example/src/components/passkey/Progress.tsx b/templates/react-ts-example/src/components/passkey/Progress.tsx deleted file mode 100644 index cd3e6899..00000000 --- a/templates/react-ts-example/src/components/passkey/Progress.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import type { ReactNode } from "react"; - -interface ProgressProps { - children: ReactNode; -} - -export const Progress = ({ children }: ProgressProps) => { - return ( -
- - - - - -

{children}

-
- ); -}; diff --git a/templates/react-ts-example/src/components/passkey/UsePasskey.tsx b/templates/react-ts-example/src/components/passkey/UsePasskey.tsx deleted file mode 100644 index 8cdde566..00000000 --- a/templates/react-ts-example/src/components/passkey/UsePasskey.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { - signIn, - WebAuthnSignInProgressStep, - type SignProgress, - type SignProgressFn, -} from "@junobuild/core"; -import { useEffect, useState } from "react"; -import type { PasskeyProps } from "../../types/passkey.ts"; -import { Progress } from "./Progress.tsx"; -import { Button } from "../Button.tsx"; - -export const UsePasskey = ({ - progress: wizardProgress, - onProgress: wizardOnProgress, -}: PasskeyProps) => { - const [progress, setProgress] = useState< - SignProgress | undefined | null - >(undefined); - - const onProgress: SignProgressFn = (progress) => - wizardOnProgress({ signIn: progress }); - - useEffect(() => { - if (wizardProgress === undefined) { - setProgress(undefined); - return; - } - - setProgress("signIn" in wizardProgress ? wizardProgress.signIn : null); - }, [wizardProgress]); - - const doSignIn = async () => { - try { - await signIn({ - webauthn: { - options: { onProgress }, - }, - }); - } catch (error: unknown) { - wizardOnProgress(undefined); - - // IRL the error would be gracefully displayed to the user unless - // it is one to ignore - for example when the user cancel the flow. - throw error; - } - }; - - return ( - <> - {progress === null ? ( - <> - ) : progress === undefined ? ( - <> -

Already got one set-up?

- - - - ) : ( - - {progress?.step === - WebAuthnSignInProgressStep.RequestingUserCredential && ( - Requesting user credential... - )} - {progress?.step === - WebAuthnSignInProgressStep.FinalizingCredential && ( - Finalizing credential... - )} - {progress?.step === WebAuthnSignInProgressStep.Signing && ( - Signing request... - )} - {progress?.step === WebAuthnSignInProgressStep.FinalizingSession && ( - Finalizing session... - )} - {progress?.step === WebAuthnSignInProgressStep.RetrievingUser && ( - Loading user... - )} - - )} - - ); -}; diff --git a/templates/react-ts-starter/package.json b/templates/react-ts-starter/package.json index 1741c2bf..9fcc5af5 100644 --- a/templates/react-ts-starter/package.json +++ b/templates/react-ts-starter/package.json @@ -13,15 +13,15 @@ "postinstall": "npm run postinstall:copy-auth" }, "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "react": "^19.2.1", "react-dom": "^19.2.1" }, "devDependencies": { "@eslint/js": "^9.34.0", - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/vite": "^4.1.13", "@types/react": "^19.2.7", diff --git a/templates/sveltekit-example/package.json b/templates/sveltekit-example/package.json index d47685fe..9725cecd 100644 --- a/templates/sveltekit-example/package.json +++ b/templates/sveltekit-example/package.json @@ -15,8 +15,8 @@ "postinstall": "npm run postinstall:copy-auth" }, "devDependencies": { - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@sveltejs/adapter-static": "^3.0.9", "@sveltejs/kit": "^2.37.0", "@sveltejs/vite-plugin-svelte": "^6.1.4", @@ -41,8 +41,8 @@ }, "type": "module", "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "nanoid": "^5.1.5" }, "overrides": { diff --git a/templates/sveltekit-example/src/routes/+layout.svelte b/templates/sveltekit-example/src/routes/+layout.svelte index db68e6f8..d285652b 100644 --- a/templates/sveltekit-example/src/routes/+layout.svelte +++ b/templates/sveltekit-example/src/routes/+layout.svelte @@ -36,10 +36,10 @@ Example App

- Explore this demo app built with SvelteKit, Tailwind, and + Try out this demo app to discover Juno, showcasing a practical application of these technologies. + >.

diff --git a/templates/sveltekit-starter/package.json b/templates/sveltekit-starter/package.json index c25f483e..f7253be2 100644 --- a/templates/sveltekit-starter/package.json +++ b/templates/sveltekit-starter/package.json @@ -15,8 +15,8 @@ "postinstall": "npm run postinstall:copy-auth" }, "devDependencies": { - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@sveltejs/adapter-static": "^3.0.9", "@sveltejs/kit": "^2.37.0", "@sveltejs/vite-plugin-svelte": "^6.1.4", @@ -44,7 +44,7 @@ "cookie": "^0.7.0" }, "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4" + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6" } } diff --git a/templates/vanilla-js-example/index.html b/templates/vanilla-js-example/index.html index d04674d9..13e01286 100644 --- a/templates/vanilla-js-example/index.html +++ b/templates/vanilla-js-example/index.html @@ -50,7 +50,7 @@ Example App

- Explore this demo app built with vanilla JavaScript, Tailwind, and + Try out this demo app to discover Juno, showcasing a practical application of these technologies. + >.

diff --git a/templates/vanilla-js-example/package.json b/templates/vanilla-js-example/package.json index 042c774d..1c84543a 100644 --- a/templates/vanilla-js-example/package.json +++ b/templates/vanilla-js-example/package.json @@ -12,8 +12,8 @@ "postinstall": "npm run postinstall:copy-auth" }, "devDependencies": { - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/vite": "^4.1.13", "prettier": "^3.6.2", @@ -22,8 +22,8 @@ "vite": "^7.1.4" }, "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "nanoid": "^5.1.5" } } diff --git a/templates/vue-example/package.json b/templates/vue-example/package.json index 4012faa1..11d237c8 100644 --- a/templates/vue-example/package.json +++ b/templates/vue-example/package.json @@ -16,16 +16,16 @@ "postinstall": "npm run postinstall:copy-auth" }, "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "nanoid": "^5.1.5", "pinia": "^3.0.3", "vue": "^3.5.21", "vue-router": "^4.5.1" }, "devDependencies": { - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/vite": "^4.1.13", "@tsconfig/node22": "^22.0.2", diff --git a/templates/vue-example/src/App.vue b/templates/vue-example/src/App.vue index 88f9dc24..fe4b4122 100644 --- a/templates/vue-example/src/App.vue +++ b/templates/vue-example/src/App.vue @@ -29,10 +29,10 @@ onMounted( Example App

- Explore this demo app built with Vue, Tailwind, and + Try out this demo app to discover Juno, showcasing a practical application of these technologies. + >.

diff --git a/templates/vue-starter/package.json b/templates/vue-starter/package.json index 573ea985..b46df599 100644 --- a/templates/vue-starter/package.json +++ b/templates/vue-starter/package.json @@ -16,15 +16,15 @@ "postinstall": "npm run postinstall:copy-auth" }, "dependencies": { - "@junobuild/core": "^3.4.0", - "@junobuild/functions": "^0.5.4", + "@junobuild/core": "^5.1.0", + "@junobuild/functions": "^0.5.6", "pinia": "^3.0.3", "vue": "^3.5.21", "vue-router": "^4.5.1" }, "devDependencies": { - "@junobuild/config": "^2.9.0", - "@junobuild/vite-plugin": "^4.4.0", + "@junobuild/config": "^2.10.1", + "@junobuild/vite-plugin": "^4.7.0", "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/vite": "^4.1.13", "@tsconfig/node22": "^22.0.2", From 0927d0fe65231f376b1ad344983d1c6d8e36a28e Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Sun, 8 Feb 2026 09:08:15 +0100 Subject: [PATCH 3/7] feat: use dev sign-in Signed-off-by: David Dal Busco --- .../login-with-google.component.html | 73 -------------- .../login-with-google.component.ts | 24 ----- .../login-with-ii.component.html | 3 - .../login-with-ii/login-with-ii.component.ts | 12 --- .../app/components/login/login.component.html | 10 +- .../app/components/login/login.component.ts | 16 ++- .../create-passkey.component.html | 54 ----------- .../create-passkey.component.ts | 97 ------------------- .../passkey/passkey/passkey.component.html | 63 ------------ .../passkey/passkey/passkey.component.ts | 53 ---------- .../passkey/progress/progress.component.html | 28 ------ .../passkey/progress/progress.component.ts | 7 -- .../use-passkey/use-passkey.component.html | 25 ----- .../use-passkey/use-passkey.component.ts | 60 ------------ 14 files changed, 14 insertions(+), 511 deletions(-) delete mode 100644 templates/angular-example/src/app/components/login-with-google/login-with-google.component.html delete mode 100644 templates/angular-example/src/app/components/login-with-google/login-with-google.component.ts delete mode 100644 templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.html delete mode 100644 templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.ts delete mode 100644 templates/angular-example/src/app/components/passkey/create-passkey/create-passkey.component.html delete mode 100644 templates/angular-example/src/app/components/passkey/create-passkey/create-passkey.component.ts delete mode 100644 templates/angular-example/src/app/components/passkey/passkey/passkey.component.html delete mode 100644 templates/angular-example/src/app/components/passkey/passkey/passkey.component.ts delete mode 100644 templates/angular-example/src/app/components/passkey/progress/progress.component.html delete mode 100644 templates/angular-example/src/app/components/passkey/progress/progress.component.ts delete mode 100644 templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.html delete mode 100644 templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.ts 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 deleted file mode 100644 index 2ffadfaa..00000000 --- a/templates/angular-example/src/app/components/login-with-google/login-with-google.component.html +++ /dev/null @@ -1,73 +0,0 @@ -Continue with Google - -@if (showModal) { - - - -} 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 deleted file mode 100644 index 525aa08f..00000000 --- a/templates/angular-example/src/app/components/login-with-google/login-with-google.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component, signal } from '@angular/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 deleted file mode 100644 index 8716297d..00000000 --- a/templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.html +++ /dev/null @@ -1,3 +0,0 @@ -Continue with Internet Identity 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 deleted file mode 100644 index e8bc709f..00000000 --- a/templates/angular-example/src/app/components/login-with-ii/login-with-ii.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -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 ff7aa9b4..6869ccff 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,3 @@ -
- - - - - -
+Sign in for dev 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 3a72e56e..2a11880e 100644 --- a/templates/angular-example/src/app/components/login/login.component.ts +++ b/templates/angular-example/src/app/components/login/login.component.ts @@ -1,11 +1,17 @@ import { Component } from '@angular/core'; -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'; +import { signIn } from '@junobuild/core'; +import { ButtonComponent } from '../button/button.component'; @Component({ selector: 'app-login', - imports: [LoginComponentWithII, PasskeyComponent, LoginComponentWithGoogle], + imports: [ButtonComponent], templateUrl: './login.component.html', }) -export class LoginComponent {} +export class LoginComponent { + async signIn() { + // Sign in for local development and E2E only + await signIn({ + dev: {}, + }); + } +} diff --git a/templates/angular-example/src/app/components/passkey/create-passkey/create-passkey.component.html b/templates/angular-example/src/app/components/passkey/create-passkey/create-passkey.component.html deleted file mode 100644 index 7c3082f8..00000000 --- a/templates/angular-example/src/app/components/passkey/create-passkey/create-passkey.component.html +++ /dev/null @@ -1,54 +0,0 @@ -@if (progress.state === "init") { -

- First time here? Use your device (Face ID, Windows Hello, or screen lock) to - get in. -

- - Create a new passkey -} - -@if (progress.state === "setup") { -

Want to give it a nickname so you'll spot it easily later?

- - - - Create now -} - -@if (progress.state === "progress") { - - @if ( - progress.detail.step === WebAuthnSignUpProgressStep.CreatingUserCredential - ) { - Creating user credential... - } - @if ( - progress.detail.step === - WebAuthnSignUpProgressStep.ValidatingUserCredential - ) { - Validating user credential... - } - @if ( - progress.detail.step === WebAuthnSignUpProgressStep.FinalizingCredential - ) { - Finalizing credential... - } - @if (progress.detail.step === WebAuthnSignUpProgressStep.Signing) { - Signing request... - } - @if ( - progress.detail.step === WebAuthnSignUpProgressStep.FinalizingSession - ) { - Finalizing session... - } - @if (progress.detail.step === WebAuthnSignUpProgressStep.RegisteringUser) { - Registering user... - } - -} diff --git a/templates/angular-example/src/app/components/passkey/create-passkey/create-passkey.component.ts b/templates/angular-example/src/app/components/passkey/create-passkey/create-passkey.component.ts deleted file mode 100644 index f6b612aa..00000000 --- a/templates/angular-example/src/app/components/passkey/create-passkey/create-passkey.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { - Component, - computed, - ElementRef, - input, - output, - signal, - ViewChild, -} from '@angular/core'; -import { - SignProgress, - SignProgressFn, - signUp, - WebAuthnSignUpProgressStep, -} from '@junobuild/core'; -import { PasskeyProgress } from '../../../types/passkey'; -import { ButtonComponent } from '../../button/button.component'; -import { ProgressComponent } from '../progress/progress.component'; - -type ProgressSignUp = - | { - state: 'init' | 'setup' | 'hidden'; - } - | { - state: 'progress'; - detail: SignProgress; - }; - -@Component({ - selector: 'app-create-passkey', - imports: [ButtonComponent, ProgressComponent], - templateUrl: './create-passkey.component.html', -}) -export class CreatePasskeyComponent { - readonly WebAuthnSignUpProgressStep = WebAuthnSignUpProgressStep; - - readonly wizardProgress = input.required(); - readonly wizardOnProgress = output(); - - @ViewChild('inputText') readonly inputText: - | ElementRef - | undefined; - passkeyDisplayName = signal(''); - - readonly #computedProgress = computed(() => { - const progress = this.wizardProgress(); - - return progress === undefined - ? { state: 'init' } - : 'signUp' in progress - ? { state: 'progress', detail: progress.signUp } - : 'setup' in progress - ? { state: 'setup' } - : { state: 'hidden' }; - }); - - get progress(): ProgressSignUp { - return this.#computedProgress(); - } - - goToSetup() { - this.wizardOnProgress.emit({ setup: null }); - } - - async doSignUp() { - try { - const onProgress: SignProgressFn = ( - progress, - ) => this.wizardOnProgress.emit({ signUp: progress }); - - await signUp({ - webauthn: { - options: { - onProgress, - ...(this.passkeyDisplayName() !== '' && { - passkey: { - user: { - displayName: this.passkeyDisplayName(), - }, - }, - }), - }, - }, - }); - } catch (error: unknown) { - this.wizardOnProgress.emit(undefined); - - // IRL the error would be gracefully displayed to the user unless - // it is one to ignore - for example when the user cancel the flow. - throw error; - } - } - - onInputChange() { - this.passkeyDisplayName.set(this.inputText?.nativeElement.value ?? ''); - } -} diff --git a/templates/angular-example/src/app/components/passkey/passkey/passkey.component.html b/templates/angular-example/src/app/components/passkey/passkey/passkey.component.html deleted file mode 100644 index 71de5cb8..00000000 --- a/templates/angular-example/src/app/components/passkey/passkey/passkey.component.html +++ /dev/null @@ -1,63 +0,0 @@ -@if (passkeySupported) { - Continue with Passkey -} - -@if (showModal) { - - - -} diff --git a/templates/angular-example/src/app/components/passkey/passkey/passkey.component.ts b/templates/angular-example/src/app/components/passkey/passkey/passkey.component.ts deleted file mode 100644 index c1e057fd..00000000 --- a/templates/angular-example/src/app/components/passkey/passkey/passkey.component.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { Component, signal, OnInit } from '@angular/core'; -import { isWebAuthnAvailable } from '@junobuild/core'; -import { PasskeyProgress } from '../../../types/passkey'; -import { ButtonComponent } from '../../button/button.component'; -import { CreatePasskeyComponent } from '../create-passkey/create-passkey.component'; -import { UsePasskeyComponent } from '../use-passkey/use-passkey.component'; -import { BackdropComponent } from '../../backdrop/backdrop.component'; - -@Component({ - selector: 'app-passkey', - templateUrl: './passkey.component.html', - imports: [ - ButtonComponent, - CreatePasskeyComponent, - UsePasskeyComponent, - BackdropComponent, - ], -}) -export class PasskeyComponent implements OnInit { - readonly #passkeySupported = signal(true); - #showModal = signal(false); - #passkeyProgress = signal(undefined); - - get passkeySupported(): boolean { - return this.#passkeySupported(); - } - get showModal(): boolean { - return this.#showModal(); - } - get progress(): PasskeyProgress | undefined { - return this.#passkeyProgress(); - } - - ngOnInit() { - isWebAuthnAvailable().then((withWebAuthn) => - this.#passkeySupported.set(withWebAuthn), - ); - } - - start() { - this.#passkeyProgress.set(undefined); - this.#showModal.set(true); - } - - close() { - this.#showModal.set(false); - this.#passkeyProgress.set(undefined); - } - - onProgress(progress: PasskeyProgress | undefined): void { - this.#passkeyProgress.set(progress); - } -} diff --git a/templates/angular-example/src/app/components/passkey/progress/progress.component.html b/templates/angular-example/src/app/components/passkey/progress/progress.component.html deleted file mode 100644 index c6e19927..00000000 --- a/templates/angular-example/src/app/components/passkey/progress/progress.component.html +++ /dev/null @@ -1,28 +0,0 @@ -
- - - - - -

-
diff --git a/templates/angular-example/src/app/components/passkey/progress/progress.component.ts b/templates/angular-example/src/app/components/passkey/progress/progress.component.ts deleted file mode 100644 index 00f6b23e..00000000 --- a/templates/angular-example/src/app/components/passkey/progress/progress.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-progress', - templateUrl: './progress.component.html', -}) -export class ProgressComponent {} diff --git a/templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.html b/templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.html deleted file mode 100644 index 09973585..00000000 --- a/templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.html +++ /dev/null @@ -1,25 +0,0 @@ -@if (progress === undefined) { -

Already got one set-up?

- - Use your passkey -} @else if (progress !== null) { - - @if ( - progress.step === WebAuthnSignInProgressStep.RequestingUserCredential - ) { - Requesting user credential... - } - @if (progress.step === WebAuthnSignInProgressStep.FinalizingCredential) { - Finalizing credential... - } - @if (progress.step === WebAuthnSignInProgressStep.Signing) { - Signing request... - } - @if (progress.step === WebAuthnSignInProgressStep.FinalizingSession) { - Finalizing session... - } - @if (progress.step === WebAuthnSignInProgressStep.RetrievingUser) { - Loading user... - } - -} diff --git a/templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.ts b/templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.ts deleted file mode 100644 index bc373ea6..00000000 --- a/templates/angular-example/src/app/components/passkey/use-passkey/use-passkey.component.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { Component, computed, input, output } from '@angular/core'; -import { - signIn, - SignProgress, - SignProgressFn, - WebAuthnSignInProgressStep, -} from '@junobuild/core'; -import type { PasskeyProgress } from '../../../types/passkey'; -import { ButtonComponent } from '../../button/button.component'; -import { ProgressComponent } from '../progress/progress.component'; - -type ProgressSignIn = - | SignProgress - | undefined - | null; - -@Component({ - selector: 'app-use-passkey', - imports: [ButtonComponent, ProgressComponent], - templateUrl: './use-passkey.component.html', -}) -export class UsePasskeyComponent { - readonly WebAuthnSignInProgressStep = WebAuthnSignInProgressStep; - - readonly wizardProgress = input.required(); - readonly wizardOnProgress = output(); - - readonly #computedProgress = computed(() => { - const progress = this.wizardProgress(); - - return progress === undefined - ? undefined - : 'signIn' in progress - ? progress.signIn - : null; - }); - - get progress(): ProgressSignIn { - return this.#computedProgress(); - } - - async doSignIn() { - const onProgress: SignProgressFn = (progress) => - this.wizardOnProgress.emit({ signIn: progress }); - - try { - await signIn({ - webauthn: { - options: { onProgress }, - }, - }); - } catch (error: unknown) { - this.wizardOnProgress.emit(undefined); - - // IRL the error would be gracefully displayed to the user unless - // it is one to ignore - for example when the user cancel the flow. - throw error; - } - } -} From 69f27cd68fce4cc8d7138c60b07b3c3b8f2dab90 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Sun, 8 Feb 2026 09:09:30 +0100 Subject: [PATCH 4/7] feat: use dev sign-in Signed-off-by: David Dal Busco --- .../src/lib/components/Auth.svelte | 10 +- .../{LoginWithII.svelte => Login.svelte} | 7 +- .../src/lib/components/LoginWithGoogle.svelte | 82 ----------------- .../components/passkey/CreatePasskey.svelte | 91 ------------------- .../src/lib/components/passkey/Passkey.svelte | 83 ----------------- .../lib/components/passkey/Progress.svelte | 38 -------- .../lib/components/passkey/UsePasskey.svelte | 57 ------------ 7 files changed, 6 insertions(+), 362 deletions(-) rename templates/sveltekit-example/src/lib/components/{LoginWithII.svelte => Login.svelte} (50%) delete mode 100644 templates/sveltekit-example/src/lib/components/LoginWithGoogle.svelte delete mode 100644 templates/sveltekit-example/src/lib/components/passkey/CreatePasskey.svelte delete mode 100644 templates/sveltekit-example/src/lib/components/passkey/Passkey.svelte delete mode 100644 templates/sveltekit-example/src/lib/components/passkey/Progress.svelte delete mode 100644 templates/sveltekit-example/src/lib/components/passkey/UsePasskey.svelte diff --git a/templates/sveltekit-example/src/lib/components/Auth.svelte b/templates/sveltekit-example/src/lib/components/Auth.svelte index 96a9e63a..a241e365 100644 --- a/templates/sveltekit-example/src/lib/components/Auth.svelte +++ b/templates/sveltekit-example/src/lib/components/Auth.svelte @@ -4,9 +4,7 @@ import { userStore } from '$lib/stores/user.store'; import { userSignedIn } from '$lib/derived/user.derived'; import Logout from '$lib/components/Logout.svelte'; - import LoginWithII from '$lib/components/LoginWithII.svelte'; - import Passkey from '$lib/components/passkey/Passkey.svelte'; - import LoginWithGoogle from '$lib/components/LoginWithGoogle.svelte'; + import Login from '$lib/components/Login.svelte'; interface Props { children: Snippet; @@ -33,10 +31,6 @@ {:else}
- - - - - +
{/if} diff --git a/templates/sveltekit-example/src/lib/components/LoginWithII.svelte b/templates/sveltekit-example/src/lib/components/Login.svelte similarity index 50% rename from templates/sveltekit-example/src/lib/components/LoginWithII.svelte rename to templates/sveltekit-example/src/lib/components/Login.svelte index 342b9815..596606ea 100644 --- a/templates/sveltekit-example/src/lib/components/LoginWithII.svelte +++ b/templates/sveltekit-example/src/lib/components/Login.svelte @@ -2,11 +2,12 @@ import Button from '$lib/components/Button.svelte'; import { signIn } from '@junobuild/core'; - const signInWithII = async () => { + const signInWithDev = async () => { + // Sign in for local development and E2E only await signIn({ - internet_identity: {} + dev: {}, }); }; - + diff --git a/templates/sveltekit-example/src/lib/components/LoginWithGoogle.svelte b/templates/sveltekit-example/src/lib/components/LoginWithGoogle.svelte deleted file mode 100644 index 194c202d..00000000 --- a/templates/sveltekit-example/src/lib/components/LoginWithGoogle.svelte +++ /dev/null @@ -1,82 +0,0 @@ - - - - -{#if showModal} - - - -{/if} diff --git a/templates/sveltekit-example/src/lib/components/passkey/CreatePasskey.svelte b/templates/sveltekit-example/src/lib/components/passkey/CreatePasskey.svelte deleted file mode 100644 index 85020dd2..00000000 --- a/templates/sveltekit-example/src/lib/components/passkey/CreatePasskey.svelte +++ /dev/null @@ -1,91 +0,0 @@ - - -{#if progress.state === 'init'} -

First time here? Use your device (Face ID, Windows Hello, or screen lock) to get in.

- - -{/if} - -{#if progress.state === 'setup'} -

Want to give it a nickname so you'll spot it easily later?

- - - - -{/if} - -{#if progress.state === 'progress'} - - {#if progress.detail.step === WebAuthnSignUpProgressStep.CreatingUserCredential} - Creating user credential... - {:else if progress.detail.step === WebAuthnSignUpProgressStep.ValidatingUserCredential} - Validating user credential... - {:else if progress.detail.step === WebAuthnSignUpProgressStep.FinalizingCredential} - Finalizing credential... - {:else if progress.detail.step === WebAuthnSignUpProgressStep.Signing} - Signing request... - {:else if progress.detail.step === WebAuthnSignUpProgressStep.FinalizingSession} - Finalizing session... - {:else if progress.detail.step === WebAuthnSignUpProgressStep.RegisteringUser} - Registering user... - {/if} - -{/if} diff --git a/templates/sveltekit-example/src/lib/components/passkey/Passkey.svelte b/templates/sveltekit-example/src/lib/components/passkey/Passkey.svelte deleted file mode 100644 index ff4a9a01..00000000 --- a/templates/sveltekit-example/src/lib/components/passkey/Passkey.svelte +++ /dev/null @@ -1,83 +0,0 @@ - - -{#if passkeySupported} - -{/if} - -{#if showModal} - - - -{/if} diff --git a/templates/sveltekit-example/src/lib/components/passkey/Progress.svelte b/templates/sveltekit-example/src/lib/components/passkey/Progress.svelte deleted file mode 100644 index e76c3c12..00000000 --- a/templates/sveltekit-example/src/lib/components/passkey/Progress.svelte +++ /dev/null @@ -1,38 +0,0 @@ - - -
- - - - - -

{@render children()}

-
diff --git a/templates/sveltekit-example/src/lib/components/passkey/UsePasskey.svelte b/templates/sveltekit-example/src/lib/components/passkey/UsePasskey.svelte deleted file mode 100644 index 95f3cdc0..00000000 --- a/templates/sveltekit-example/src/lib/components/passkey/UsePasskey.svelte +++ /dev/null @@ -1,57 +0,0 @@ - - -{#if progress === undefined} -

Already got one set-up?

- - -{:else if progress !== null} - - {#if progress.step === WebAuthnSignInProgressStep.RequestingUserCredential} - Requesting user credential... - {:else if progress.step === WebAuthnSignInProgressStep.FinalizingCredential} - Finalizing credential... - {:else if progress.step === WebAuthnSignInProgressStep.Signing} - Signing request... - {:else if progress.step === WebAuthnSignInProgressStep.FinalizingSession} - Finalizing session... - {:else if progress.step === WebAuthnSignInProgressStep.RetrievingUser} - Loading user... - {/if} - -{/if} From 51046fc053ebe17849ab8e9d4528461de7c96784 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Sun, 8 Feb 2026 09:11:29 +0100 Subject: [PATCH 5/7] feat: use dev sign-in Signed-off-by: David Dal Busco --- .../src/components/login-with-google.js | 91 ------------- .../components/{login-with-ii.js => login.js} | 17 +-- .../src/components/passkey.js | 122 ------------------ templates/vanilla-js-example/src/main.js | 4 +- 4 files changed, 8 insertions(+), 226 deletions(-) delete mode 100644 templates/vanilla-js-example/src/components/login-with-google.js rename templates/vanilla-js-example/src/components/{login-with-ii.js => login.js} (69%) delete mode 100644 templates/vanilla-js-example/src/components/passkey.js diff --git a/templates/vanilla-js-example/src/components/login-with-google.js b/templates/vanilla-js-example/src/components/login-with-google.js deleted file mode 100644 index 88dc16c3..00000000 --- a/templates/vanilla-js-example/src/components/login-with-google.js +++ /dev/null @@ -1,91 +0,0 @@ -import { addEventClick } from "../utils/utils.js"; - -export const renderLoginWithGoogle = (app) => { - addEventClick({ - target: app, - selector: "#loginWithGoogle", - fn: showModal, - }); - - return ` - -
-`; -}; - -const closeModal = (modal) => (modal.innerHTML = ""); - -const showModal = () => { - const modal = document.querySelector("#wizard"); - - addEventClick({ - target: modal, - selector: "#closeModal", - fn: () => closeModal(modal), - }); - - modal.innerHTML = ` - -
`; -}; diff --git a/templates/vanilla-js-example/src/components/login-with-ii.js b/templates/vanilla-js-example/src/components/login.js similarity index 69% rename from templates/vanilla-js-example/src/components/login-with-ii.js rename to templates/vanilla-js-example/src/components/login.js index 1bffdeb9..f0e90f91 100644 --- a/templates/vanilla-js-example/src/components/login-with-ii.js +++ b/templates/vanilla-js-example/src/components/login.js @@ -1,29 +1,24 @@ import { signIn } from "@junobuild/core"; import { addEventClick } from "../utils/utils"; -import { renderPasskey } from "./passkey.js"; -import { renderLoginWithGoogle } from "./login-with-google.js"; -export const renderLoginWithII = (app) => { - const signInWithII = async () => { +export const renderLogin = (app) => { + const signInWithDev = async () => { + // Sign in for local development and E2E only await signIn({ - internet_identity: {}, + dev: {}, }); }; addEventClick({ target: app, selector: "#login", - fn: signInWithII, + fn: signInWithDev, }); app.innerHTML = `
- ${renderLoginWithGoogle(app)} - - ${renderPasskey(app)} -
`; }; diff --git a/templates/vanilla-js-example/src/components/passkey.js b/templates/vanilla-js-example/src/components/passkey.js deleted file mode 100644 index fab9b93a..00000000 --- a/templates/vanilla-js-example/src/components/passkey.js +++ /dev/null @@ -1,122 +0,0 @@ -import { addEventClick } from "../utils/utils.js"; -import { signIn, signUp } from "@junobuild/core"; - -export const renderPasskey = (app) => { - addEventClick({ - target: app, - selector: "#loginWithPasskey", - fn: showModal, - }); - - return ` - -
-`; -}; - -const closeModal = (modal) => (modal.innerHTML = ""); - -const showModal = () => { - const modal = document.querySelector("#wizard"); - - addEventClick({ - target: modal, - selector: "#closeModal", - fn: () => closeModal(modal), - }); - - const doSignIn = async () => { - await signIn({ - webauthn: {}, - }); - }; - - addEventClick({ - target: modal, - selector: `#create-passkey`, - fn: () => showSignUp(modal), - }); - - addEventClick({ - target: modal, - selector: `#use-passkey`, - fn: doSignIn, - }); - - modal.innerHTML = ` - -
`; -}; - -const showSignUp = (modal) => { - const doSignUp = async () => { - await signUp({ - webauthn: {}, - }); - }; - - const createPasskey = document.querySelector("#create-passkey"); - - addEventClick({ - target: modal, - selector: `#create-passkey-now`, - fn: doSignUp, - }); - - const button = document.createElement("button"); - button.id = "create-passkey-now"; - - createPasskey.after(button); - createPasskey.parentElement.removeChild(createPasskey); - - button.outerHTML = ``; -}; diff --git a/templates/vanilla-js-example/src/main.js b/templates/vanilla-js-example/src/main.js index 95f53247..4158b5fb 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 { renderLoginWithII } from "./components/login-with-ii.js"; +import { renderLogin } from "./components/login.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) { - renderLoginWithII(app); + renderLogin(app); return; } From 4a29ca56fe10b6b050f06eb77d48ebb2e792dfb6 Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Sun, 8 Feb 2026 09:12:15 +0100 Subject: [PATCH 6/7] feat: use dev sign-in Signed-off-by: David Dal Busco --- templates/vue-example/src/components/Auth.vue | 10 +- .../components/{LoginWithII.vue => Login.vue} | 9 +- .../src/components/LoginWithGoogle.vue | 85 -------------- .../src/components/passkey/CreatePasskey.vue | 106 ------------------ .../src/components/passkey/Passkey.vue | 86 -------------- .../src/components/passkey/Progress.vue | 30 ----- .../src/components/passkey/UsePasskey.vue | 69 ------------ 7 files changed, 7 insertions(+), 388 deletions(-) rename templates/vue-example/src/components/{LoginWithII.vue => Login.vue} (50%) delete mode 100644 templates/vue-example/src/components/LoginWithGoogle.vue delete mode 100644 templates/vue-example/src/components/passkey/CreatePasskey.vue delete mode 100644 templates/vue-example/src/components/passkey/Passkey.vue delete mode 100644 templates/vue-example/src/components/passkey/Progress.vue delete mode 100644 templates/vue-example/src/components/passkey/UsePasskey.vue diff --git a/templates/vue-example/src/components/Auth.vue b/templates/vue-example/src/components/Auth.vue index 3b58d018..25c464cc 100644 --- a/templates/vue-example/src/components/Auth.vue +++ b/templates/vue-example/src/components/Auth.vue @@ -1,10 +1,8 @@ diff --git a/templates/vue-example/src/components/LoginWithGoogle.vue b/templates/vue-example/src/components/LoginWithGoogle.vue deleted file mode 100644 index 2aade8ca..00000000 --- a/templates/vue-example/src/components/LoginWithGoogle.vue +++ /dev/null @@ -1,85 +0,0 @@ - - - diff --git a/templates/vue-example/src/components/passkey/CreatePasskey.vue b/templates/vue-example/src/components/passkey/CreatePasskey.vue deleted file mode 100644 index d3a9471e..00000000 --- a/templates/vue-example/src/components/passkey/CreatePasskey.vue +++ /dev/null @@ -1,106 +0,0 @@ - - - diff --git a/templates/vue-example/src/components/passkey/Passkey.vue b/templates/vue-example/src/components/passkey/Passkey.vue deleted file mode 100644 index ce85dda0..00000000 --- a/templates/vue-example/src/components/passkey/Passkey.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/templates/vue-example/src/components/passkey/Progress.vue b/templates/vue-example/src/components/passkey/Progress.vue deleted file mode 100644 index 969966a8..00000000 --- a/templates/vue-example/src/components/passkey/Progress.vue +++ /dev/null @@ -1,30 +0,0 @@ - diff --git a/templates/vue-example/src/components/passkey/UsePasskey.vue b/templates/vue-example/src/components/passkey/UsePasskey.vue deleted file mode 100644 index f630f892..00000000 --- a/templates/vue-example/src/components/passkey/UsePasskey.vue +++ /dev/null @@ -1,69 +0,0 @@ - - - From 0050e082f13d191a30f0a795b25af6cf46b9a33a Mon Sep 17 00:00:00 2001 From: David Dal Busco Date: Sun, 8 Feb 2026 09:16:37 +0100 Subject: [PATCH 7/7] chore: fmt Signed-off-by: David Dal Busco --- .../src/app/components/login/login.component.html | 4 +--- templates/nextjs-example/src/app/page.tsx | 3 ++- templates/react-example/src/App.jsx | 3 ++- templates/react-ts-example/src/App.tsx | 3 ++- templates/sveltekit-example/src/lib/components/Login.svelte | 2 +- templates/vue-example/src/components/Login.vue | 2 +- 6 files changed, 9 insertions(+), 8 deletions(-) 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 6869ccff..e1eec53b 100644 --- a/templates/angular-example/src/app/components/login/login.component.html +++ b/templates/angular-example/src/app/components/login/login.component.html @@ -1,3 +1 @@ -Sign in for dev +Sign in for dev diff --git a/templates/nextjs-example/src/app/page.tsx b/templates/nextjs-example/src/app/page.tsx index 6299098b..efd3774c 100644 --- a/templates/nextjs-example/src/app/page.tsx +++ b/templates/nextjs-example/src/app/page.tsx @@ -37,7 +37,8 @@ export default function Home() { className="underline" > Juno - . + + .

diff --git a/templates/react-example/src/App.jsx b/templates/react-example/src/App.jsx index 4d331cf2..739fc0dc 100644 --- a/templates/react-example/src/App.jsx +++ b/templates/react-example/src/App.jsx @@ -35,7 +35,8 @@ function App() { className="underline" > Juno - . + + .

diff --git a/templates/react-ts-example/src/App.tsx b/templates/react-ts-example/src/App.tsx index 3bbdb530..adb5f769 100644 --- a/templates/react-ts-example/src/App.tsx +++ b/templates/react-ts-example/src/App.tsx @@ -35,7 +35,8 @@ const App: FC = () => { className="underline" > Juno - . + + .

diff --git a/templates/sveltekit-example/src/lib/components/Login.svelte b/templates/sveltekit-example/src/lib/components/Login.svelte index 596606ea..565b57c6 100644 --- a/templates/sveltekit-example/src/lib/components/Login.svelte +++ b/templates/sveltekit-example/src/lib/components/Login.svelte @@ -5,7 +5,7 @@ const signInWithDev = async () => { // Sign in for local development and E2E only await signIn({ - dev: {}, + dev: {} }); }; diff --git a/templates/vue-example/src/components/Login.vue b/templates/vue-example/src/components/Login.vue index d34635ac..13924e1f 100644 --- a/templates/vue-example/src/components/Login.vue +++ b/templates/vue-example/src/components/Login.vue @@ -6,7 +6,7 @@ const signInWithDev = async () => { // Sign in for local development and E2E only await signIn({ dev: {}, - }); + }) }