feat: allow onboarding to continue without signing in

apps/desktop/src/onboarding/account/before-login.tsx

@@ -1,25 +1,51 @@
 import { useState } from "react";
 
+import { commands as analyticsCommands } from "@hypr/plugin-analytics";
+
 import { OnboardingButton } from "../shared";
 
 import { useAuth } from "~/auth";
 
-export function BeforeLogin() {
+export function BeforeLogin({ onContinue }: { onContinue: () => void }) {
   const auth = useAuth();
   const [showCallbackUrlInput, setShowCallbackUrlInput] = useState(false);
+  const [didClickSignIn, setDidClickSignIn] = useState(false);
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex items-center gap-3">
-        <OnboardingButton onClick={() => auth?.signIn()}>
-          Sign in
-        </OnboardingButton>
-        <button
-          className="text-sm text-neutral-500 underline hover:text-neutral-600"
-          onClick={() => setShowCallbackUrlInput(true)}
-        >
-          Something not working?
-        </button>
+      <div className="flex flex-col items-start gap-2">
+        <div className="flex items-center gap-3">
+          <OnboardingButton
+            onClick={() => {
+              setDidClickSignIn(true);
+              auth?.signIn();
+            }}
+          >
+            Sign in
+          </OnboardingButton>
+          {didClickSignIn ? (
+            <button
+              type="button"
+              className="text-sm text-neutral-500 underline hover:text-neutral-600"
+              onClick={() => setShowCallbackUrlInput(true)}
+            >
+              Something not working?
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => {
+                void analyticsCommands.event({
+                  event: "onboarding_login_skipped",
+                });
+                onContinue();
+              }}
+              className="text-sm text-neutral-500/70 transition-colors hover:text-neutral-700"
+            >
+              Skip for now
+            </button>
+          )}
+        </div>
       </div>
       {showCallbackUrlInput && <CallbackUrlInput />}
     </div>
@@ -41,6 +67,7 @@ function CallbackUrlInput() {
         onChange={(e) => setCallbackUrl(e.target.value)}
       />
       <button
+        type="button"
         onClick={() => auth?.handleAuthCallback(callbackUrl)}
         disabled={!callbackUrl}
         className="absolute right-0.5 rounded-full bg-neutral-600 px-4 py-2 text-sm text-white transition-all enabled:hover:scale-[1.02] enabled:active:scale-[0.98] disabled:opacity-50"

apps/desktop/src/onboarding/account/index.tsx

@@ -3,12 +3,25 @@ import { BeforeLogin } from "./before-login";
 
 import { useAuth } from "~/auth";
 
-export function LoginSection({ onContinue }: { onContinue: () => void }) {
+export function LoginSection({
+  onContinue,
+  onSkip,
+}: {
+  onContinue: () => void;
+  onSkip?: () => void;
+}) {
   const auth = useAuth();
 
   if (auth?.session) {
     return <AfterLogin onContinue={onContinue} />;
   }
 
-  return <BeforeLogin />;
+  return (
+    <BeforeLogin
+      onContinue={() => {
+        onSkip?.();
+        onContinue();
+      }}
+    />
+  );
 }

apps/desktop/src/onboarding/index.tsx

@@ -19,6 +19,7 @@ import { FolderLocationSection } from "./folder-location";
 import { PermissionsSection } from "./permissions";
 import { OnboardingSection } from "./shared";
 
+import { useAuth } from "~/auth";
 import { StandardTabWrapper } from "~/shared/main";
 import { type TabItem, TabItemBase } from "~/shared/tabs";
 import { type Tab, useTabs } from "~/store/zustand/tabs";
@@ -65,8 +66,10 @@ export function TabContentOnboarding({
   const queryClient = useQueryClient();
   const close = useTabs((state) => state.close);
   const currentTab = useTabs((state) => state.currentTab);
+  const auth = useAuth();
   const [isMuted, setIsMuted] = useState(false);
   const [currentStep, setCurrentStep] = useState(getInitialStep);
+  const [didSkipLogin, setDidSkipLogin] = useState(false);
   const onboardingVideoRef = useRef<HTMLVideoElement>(null);
 
   const goNext = useCallback(() => {
@@ -169,12 +172,21 @@ export function TabContentOnboarding({
             <OnboardingSection
               title="Account"
               description="Start using Char to focus on people, not note-taking"
-              completedTitle="Signed up"
+              completedTitle={
+                auth.session
+                  ? "Signed in"
+                  : didSkipLogin
+                    ? "Skipped"
+                    : "Account"
+              }
               status={getStepStatus("login", currentStep)}
               onBack={goBack}
               onNext={goNext}
             >
-              <LoginSection onContinue={goNext} />
+              <LoginSection
+                onContinue={goNext}
+                onSkip={() => setDidSkipLogin(true)}
+              />
             </OnboardingSection>
 
             <OnboardingSection