From 3fd8b9d7c49b05942c9c5871882b90ecb98e28e6 Mon Sep 17 00:00:00 2001
From: Amar Trebinjac <amartrebinjac@gmail.com>
Date: Thu, 4 Jun 2026 16:41:07 +0200
Subject: [PATCH 1/3] feat: new login banners

---
 .../src/newtab/HijackingLoginStrip.spec.tsx   | 415 ++++++++++++++--
 .../src/newtab/HijackingLoginStrip.tsx        | 443 +++++++++++++++++-
 packages/shared/src/lib/featureManagement.ts  |  10 +
 packages/shared/src/styles/base.css           |  51 ++
 4 files changed, 861 insertions(+), 58 deletions(-)

diff --git a/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx b/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
index 087c8a528b7..a545bc6a827 100644
--- a/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
+++ b/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
@@ -1,8 +1,16 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { AuthContextData } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
+import { useConditionalFeature } from '@dailydotdev/shared/src/hooks';
+import { useSignBack } from '@dailydotdev/shared/src/hooks/auth/useSignBack';
+import {
+  AuthDisplay,
+  SocialProvider,
+} from '@dailydotdev/shared/src/components/auth/common';
+import { HijackingVariant } from '@dailydotdev/shared/src/lib/featureManagement';
 import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
 import { onboardingUrl } from '@dailydotdev/shared/src/lib/constants';
 import { LogEvent, TargetType } from '@dailydotdev/shared/src/lib/log';
@@ -14,10 +22,62 @@ jest.mock('@dailydotdev/shared/src/contexts/AuthContext', () => ({
   useAuthContext: jest.fn(),
 }));
 
+jest.mock('@dailydotdev/shared/src/hooks', () => ({
+  ...jest.requireActual('@dailydotdev/shared/src/hooks'),
+  useConditionalFeature: jest.fn(),
+}));
+
+jest.mock('@dailydotdev/shared/src/hooks/auth/useSignBack', () => ({
+  useSignBack: jest.fn(),
+}));
+
+jest.mock('@dailydotdev/shared/src/components/auth/AuthOptions', () => {
+  const { AuthDisplay: MockAuthDisplay } = jest.requireActual(
+    '@dailydotdev/shared/src/components/auth/common',
+  );
+
+  return {
+    __esModule: true,
+    default: ({
+      onAuthStateUpdate,
+    }: {
+      onAuthStateUpdate?: (props: { defaultDisplay?: string }) => void;
+    }) => (
+      <div>
+        <button type="button">Continue with Google</button>
+        <button type="button">Continue with GitHub</button>
+        <button
+          type="button"
+          onClick={() =>
+            onAuthStateUpdate?.({
+              defaultDisplay: MockAuthDisplay.Registration,
+            })
+          }
+        >
+          Continue with email
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            onAuthStateUpdate?.({ defaultDisplay: MockAuthDisplay.Default })
+          }
+        >
+          Log in
+        </button>
+        <p>By continuing, you agree to the Terms of Service</p>
+      </div>
+    ),
+  };
+});
+
 const LogContext = getLogContextStatic();
 const mockUseAuthContext = useAuthContext as jest.MockedFunction<
   typeof useAuthContext
 >;
+const mockUseSignBack = useSignBack as jest.MockedFunction<typeof useSignBack>;
+const mockUseConditionalFeature = useConditionalFeature as jest.MockedFunction<
+  typeof useConditionalFeature
+>;
 const logEvent = jest.fn();
 const showLogin = jest.fn();
 
@@ -53,6 +113,16 @@ const defaultAuthContext = {
   isFunnel: false,
 } satisfies AuthContextData;
 
+const setVariant = (
+  variant: HijackingVariant,
+  { isLoading = false }: { isLoading?: boolean } = {},
+): void => {
+  mockUseConditionalFeature.mockReturnValue({
+    value: variant,
+    isLoading,
+  });
+};
+
 const renderComponent = (
   authContext: Partial<AuthContextData> = {},
 ): ReturnType<typeof render> => {
@@ -61,71 +131,320 @@ const renderComponent = (
     ...authContext,
   });
 
-  return render(
-    <LogContext.Provider
-      value={{
-        logEvent,
-        logEventStart: jest.fn(),
-        logEventEnd: jest.fn(),
-        sendBeacon: jest.fn(),
-      }}
-    >
-      <HijackingLoginStrip />
-    </LogContext.Provider>,
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  const Wrapper = ({
+    children,
+  }: {
+    children: React.ReactNode;
+  }): React.ReactElement => (
+    <QueryClientProvider client={queryClient}>
+      <LogContext.Provider
+        value={{
+          logEvent,
+          logEventStart: jest.fn(),
+          logEventEnd: jest.fn(),
+          sendBeacon: jest.fn(),
+        }}
+      >
+        {children}
+      </LogContext.Provider>
+    </QueryClientProvider>
   );
+
+  return render(<HijackingLoginStrip />, { wrapper: Wrapper });
 };
 
 beforeEach(() => {
   jest.clearAllMocks();
+  setVariant(HijackingVariant.Default);
+  mockUseSignBack.mockReturnValue({
+    isLoaded: true,
+    signBack: undefined,
+    provider: undefined,
+    onUpdateSignBack: jest.fn(),
+  });
 });
 
 describe('HijackingLoginStrip', () => {
-  it('shows a login CTA for logged out users', () => {
-    renderComponent();
-
-    expect(
-      screen.getByText('Unlock the full daily.dev experience'),
-    ).toBeVisible();
-    expect(
-      screen.getByText('Log in to pick up where you left off.'),
-    ).toBeVisible();
-
-    const cta = screen.getByRole('button', { name: 'Log in to continue' });
-    fireEvent.click(cta);
-
-    expect(logEvent).toHaveBeenCalledWith({
-      event_name: LogEvent.Click,
-      target_type: TargetType.LoginButton,
-      target_id: 'hijacking',
+  it('renders nothing while the experiment is loading', () => {
+    setVariant(HijackingVariant.Default, { isLoading: true });
+
+    const { container } = renderComponent();
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  describe('default variant', () => {
+    it('shows the original banner with a log in CTA for logged out users', () => {
+      renderComponent();
+
+      expect(
+        screen.getByRole('heading', {
+          name: 'Unlock the full daily.dev experience',
+        }),
+      ).toBeVisible();
+      expect(
+        screen.getByText('Log in to pick up where you left off.'),
+      ).toBeVisible();
+
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Log in to continue' }),
+      );
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(showLogin).toHaveBeenCalledWith({
+        trigger: AuthTriggers.Onboarding,
+        options: { isLogin: true },
+      });
+    });
+
+    it('shows an onboarding CTA for logged in users who still need onboarding', () => {
+      renderComponent({ user: loggedUser, isLoggedIn: true });
+
+      expect(
+        screen.getByText(/You still have a few onboarding steps left/),
+      ).toBeVisible();
+
+      const cta = screen.getByRole('link', { name: 'Continue onboarding' });
+      const expectedUrl = new URL(onboardingUrl);
+      expectedUrl.searchParams.append('r', 'extension');
+
+      expect(cta).toHaveAttribute('href', expectedUrl.toString());
+
+      fireEvent.click(cta);
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(showLogin).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('cta variant', () => {
+    beforeEach(() => {
+      setVariant(HijackingVariant.CTA);
+    });
+
+    it('shows the cat stage hero with sign up and log in CTAs', () => {
+      renderComponent();
+
+      expect(
+        screen.getByRole('heading', {
+          name: 'Own your new tab. Make it your dev briefing.',
+        }),
+      ).toBeVisible();
+
+      fireEvent.click(screen.getByRole('button', { name: 'Sign up' }));
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.SignupButton,
+        target_id: 'hijacking',
+      });
+      expect(showLogin).toHaveBeenCalledWith({
+        trigger: AuthTriggers.Onboarding,
+        options: { isLogin: false },
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: 'Log in' }));
+      expect(showLogin).toHaveBeenCalledWith({
+        trigger: AuthTriggers.Onboarding,
+        options: { isLogin: true },
+      });
     });
-    expect(showLogin).toHaveBeenCalledWith({
-      trigger: AuthTriggers.Onboarding,
-      options: { isLogin: true },
+
+    it('logs a signup impression for new visitors', () => {
+      renderComponent();
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Impression,
+        target_type: TargetType.SignupButton,
+        target_id: 'hijacking',
+      });
     });
   });
 
-  it('shows an onboarding CTA for logged in users who still need onboarding', () => {
-    renderComponent({ user: loggedUser, isLoggedIn: true });
+  describe('auth variant', () => {
+    beforeEach(() => {
+      setVariant(HijackingVariant.Auth);
+    });
+
+    it('encourages signup for logged out users without a remembered account', () => {
+      renderComponent();
+
+      expect(
+        screen.getByRole('heading', {
+          name: 'Where developers make every tab count.',
+        }),
+      ).toBeVisible();
+
+      expect(
+        screen.getByRole('button', { name: 'Continue with Google' }),
+      ).toBeVisible();
+      expect(
+        screen.getByRole('button', { name: 'Continue with GitHub' }),
+      ).toBeVisible();
+      expect(
+        screen.getByRole('button', { name: 'Continue with email' }),
+      ).toBeVisible();
+      expect(
+        screen.getByText(/By continuing, you agree to the Terms of Service/),
+      ).toBeVisible();
+
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Continue with email' }),
+      );
+
+      expect(showLogin).toHaveBeenCalledWith({
+        trigger: AuthTriggers.Onboarding,
+        options: {
+          isLogin: false,
+          defaultDisplay: AuthDisplay.Registration,
+          formValues: undefined,
+        },
+      });
+    });
+
+    it('logs a signup impression for new visitors', () => {
+      renderComponent();
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Impression,
+        target_type: TargetType.SignupButton,
+        target_id: 'hijacking',
+      });
+    });
+
+    it('waits for remembered account storage before logging the impression', () => {
+      let signBackState: ReturnType<typeof useSignBack> = {
+        isLoaded: false,
+        signBack: undefined,
+        provider: undefined,
+        onUpdateSignBack: jest.fn(),
+      };
+
+      mockUseSignBack.mockImplementation(() => signBackState);
+
+      const { rerender } = renderComponent();
+
+      expect(logEvent).not.toHaveBeenCalled();
+
+      signBackState = {
+        isLoaded: true,
+        signBack: {
+          name: 'Tsahi Matsliah',
+          email: 'tsahi@daily.dev',
+          image: 'https://daily.dev/tsahi.png',
+        },
+        provider: SocialProvider.Google,
+        onUpdateSignBack: jest.fn(),
+      };
+
+      rerender(<HijackingLoginStrip />);
+
+      expect(
+        screen.getByRole('heading', { name: /Welcome back, Tsahi/ }),
+      ).toBeVisible();
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Impression,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(logEvent).not.toHaveBeenCalledWith({
+        event_name: LogEvent.Impression,
+        target_type: TargetType.SignupButton,
+        target_id: 'hijacking',
+      });
+    });
+
+    it('offers a welcome-back "Continue as" for users with a remembered account', () => {
+      mockUseSignBack.mockReturnValue({
+        isLoaded: true,
+        signBack: {
+          name: 'Tsahi Matsliah',
+          email: 'tsahi@daily.dev',
+          image: 'https://daily.dev/tsahi.png',
+        },
+        provider: SocialProvider.Google,
+        onUpdateSignBack: jest.fn(),
+      });
+
+      renderComponent();
+
+      expect(
+        screen.getByRole('heading', { name: /Welcome back, Tsahi/ }),
+      ).toBeVisible();
+      expect(screen.getByText('tsahi@daily.dev')).toBeVisible();
+
+      const cta = screen.getByRole('button', { name: /Continue as Tsahi/ });
+      fireEvent.click(cta);
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Impression,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(showLogin).toHaveBeenCalledWith({
+        trigger: AuthTriggers.Onboarding,
+        options: { isLogin: true },
+      });
+    });
+
+    it('lets remembered users create a different account', () => {
+      mockUseSignBack.mockReturnValue({
+        isLoaded: true,
+        signBack: {
+          name: 'Tsahi Matsliah',
+          email: 'tsahi@daily.dev',
+          image: 'https://daily.dev/tsahi.png',
+        },
+        provider: SocialProvider.Google,
+        onUpdateSignBack: jest.fn(),
+      });
+
+      renderComponent();
+
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Create an account' }),
+      );
+
+      expect(showLogin).toHaveBeenCalledWith({
+        trigger: AuthTriggers.Onboarding,
+        options: { isLogin: false },
+      });
+    });
+
+    it('shows an onboarding CTA for logged in users who still need onboarding', () => {
+      renderComponent({ user: loggedUser, isLoggedIn: true });
 
-    expect(
-      screen.getByText(
-        'You still have a few onboarding steps left. Finish them to unlock the full experience.',
-      ),
-    ).toBeVisible();
+      expect(
+        screen.getByText(
+          'Finish onboarding to unlock the full daily.dev experience.',
+        ),
+      ).toBeVisible();
 
-    const cta = screen.getByRole('link', { name: 'Continue onboarding' });
-    const expectedUrl = new URL(onboardingUrl);
-    expectedUrl.searchParams.append('r', 'extension');
+      const cta = screen.getByRole('link', { name: /Continue/ });
+      const expectedUrl = new URL(onboardingUrl);
+      expectedUrl.searchParams.append('r', 'extension');
 
-    expect(cta).toHaveAttribute('href', expectedUrl.toString());
+      expect(cta).toHaveAttribute('href', expectedUrl.toString());
 
-    fireEvent.click(cta);
+      fireEvent.click(cta);
 
-    expect(logEvent).toHaveBeenCalledWith({
-      event_name: LogEvent.Click,
-      target_type: TargetType.LoginButton,
-      target_id: 'hijacking',
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(showLogin).not.toHaveBeenCalled();
     });
-    expect(showLogin).not.toHaveBeenCalled();
   });
 });
diff --git a/packages/extension/src/newtab/HijackingLoginStrip.tsx b/packages/extension/src/newtab/HijackingLoginStrip.tsx
index 7185dbc58ac..24e8b57b589 100644
--- a/packages/extension/src/newtab/HijackingLoginStrip.tsx
+++ b/packages/extension/src/newtab/HijackingLoginStrip.tsx
@@ -1,28 +1,237 @@
-import type { ReactElement } from 'react';
-import React from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import {
   Button,
+  ButtonSize,
   ButtonVariant,
 } from '@dailydotdev/shared/src/components/buttons/Button';
+import { ClickableText } from '@dailydotdev/shared/src/components/buttons/ClickableText';
+import AuthOptions from '@dailydotdev/shared/src/components/auth/AuthOptions';
+import {
+  ProfileImageSize,
+  ProfilePicture,
+} from '@dailydotdev/shared/src/components/ProfilePicture';
+import {
+  AuthDisplay,
+  type AuthOptionsProps,
+  providerMap,
+  type SocialProvider,
+} from '@dailydotdev/shared/src/components/auth/common';
+import { onboardingGradientClasses } from '@dailydotdev/shared/src/components/onboarding/common';
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
+import { useConditionalFeature } from '@dailydotdev/shared/src/hooks';
+import { useSignBack } from '@dailydotdev/shared/src/hooks/auth/useSignBack';
 import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
 import { onboardingUrl } from '@dailydotdev/shared/src/lib/constants';
+import {
+  cloudinaryOnboardingFullBackgroundDesktop,
+  cloudinaryOnboardingFullBackgroundMobile,
+  cloudinaryReadingReminderCat,
+} from '@dailydotdev/shared/src/lib/image';
+import {
+  featureHijackingVariants,
+  HijackingVariant,
+} from '@dailydotdev/shared/src/lib/featureManagement';
 import { LogEvent, TargetType } from '@dailydotdev/shared/src/lib/log';
 import feedStyles from '@dailydotdev/shared/src/components/Feed.module.css';
-import { cloudinaryReadingReminderCat } from '@dailydotdev/shared/src/lib/image';
+import LogoIcon from '@dailydotdev/shared/src/svg/LogoIcon';
+import LogoText from '@dailydotdev/shared/src/svg/LogoText';
+
+type CoverVariant = 'continue' | 'signin' | 'onboarding';
+
+const primaryCta =
+  'transition-transform duration-200 ease-out hover:-translate-y-0.5';
+
+const glassCta =
+  '!border-white/20 !bg-white/[0.06] !text-white backdrop-blur-sm transition-colors duration-200 hover:!bg-white/[0.12]';
+
+const onboardingHref = (() => {
+  const base = new URL(onboardingUrl);
+  base.searchParams.append('r', 'extension');
+
+  return base.toString();
+})();
+
+function BrandLockup(): ReactElement {
+  return (
+    <span className="flex items-center gap-2 text-white">
+      <LogoIcon className={{ container: 'h-7 w-auto' }} />
+      <LogoText className={{ container: 'h-6 w-auto' }} />
+    </span>
+  );
+}
+
+function CatHeroImage(): ReactElement {
+  return (
+    <div className="relative w-full max-w-[26rem] tablet:max-w-[30rem]">
+      <img
+        src={cloudinaryReadingReminderCat}
+        alt="Sleeping cat on laptop"
+        className="relative z-1 w-full rounded-16 object-contain"
+      />
+    </div>
+  );
+}
+
+interface SigninHeroProps {
+  onSignupClick: () => void;
+  onLoginClick: () => void;
+  formRef: AuthOptionsProps['formRef'];
+  onAuthStateUpdate: AuthOptionsProps['onAuthStateUpdate'];
+}
+
+type HeroActionButtonsProps = Pick<
+  SigninHeroProps,
+  'onSignupClick' | 'onLoginClick'
+>;
+
+function HeroActionButtons({
+  onSignupClick,
+  onLoginClick,
+}: HeroActionButtonsProps): ReactElement {
+  return (
+    <div className="mt-8 flex w-full max-w-[23rem] flex-row gap-3 tablet:mx-0">
+      <Button
+        type="button"
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Large}
+        className={classNames('flex-1', primaryCta)}
+        onClick={onSignupClick}
+      >
+        Sign up
+      </Button>
+      <Button
+        type="button"
+        variant={ButtonVariant.Secondary}
+        size={ButtonSize.Large}
+        className={classNames('flex-1', glassCta)}
+        onClick={onLoginClick}
+      >
+        Log in
+      </Button>
+    </div>
+  );
+}
+
+function CatStageHero({
+  onSignupClick,
+  onLoginClick,
+}: SigninHeroProps): ReactElement {
+  return (
+    <section className={classNames('mb-4 w-full pb-0', feedStyles.cards)}>
+      <div className="relative overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-raw-pepper-90 shadow-2">
+        <div className="top-hero-stage pointer-events-none absolute inset-0" />
+        <div className="top-hero-aurora opacity-70 pointer-events-none absolute inset-0" />
+        <div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/[0.06] to-transparent" />
+        <div className="via-white/25 pointer-events-none absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-gradient-to-r from-transparent to-transparent" />
+        <div className="bg-accent-cabbage-default/20 pointer-events-none absolute -bottom-8 left-1/2 h-32 w-[82%] -translate-x-1/2 rounded-[100%] blur-2xl" />
+        <div className="via-accent-cabbage-default/80 pointer-events-none absolute bottom-0 left-1/2 h-px w-[86%] -translate-x-1/2 bg-gradient-to-r from-transparent to-transparent" />
+        <div className="bg-accent-cabbage-default/12 pointer-events-none absolute -left-28 bottom-0 hidden h-72 w-72 rounded-full blur-3xl tablet:block" />
+        <div className="bg-accent-onion-default/14 pointer-events-none absolute -right-28 top-4 hidden h-72 w-72 rounded-full blur-3xl tablet:block" />
+        <div className="dark relative z-1 mx-auto grid min-h-[22rem] w-full max-w-[64rem] items-center gap-8 px-6 py-14 text-center tablet:min-h-[28rem] tablet:grid-cols-[minmax(0,1fr)_24rem] tablet:px-10 tablet:py-16 tablet:text-left">
+          <div className="flex flex-col items-center tablet:items-start">
+            <BrandLockup />
+            <h2 className="mt-7 max-w-[42rem] text-balance font-bold text-white typo-title1 tablet:typo-mega2">
+              Own your new tab. Make it your dev briefing.
+            </h2>
+            <div className="via-accent-cabbage-default/70 mt-5 h-px w-40 bg-gradient-to-r from-transparent to-transparent" />
+            <p className="text-white/70 mt-4 max-w-[31rem] text-balance typo-callout tablet:typo-title3">
+              Sign in and daily.dev will remember the topics, saves, upvotes,
+              and discussions that matter to you.
+            </p>
+            <HeroActionButtons
+              onSignupClick={onSignupClick}
+              onLoginClick={onLoginClick}
+            />
+          </div>
+          <div className="flex justify-center tablet:justify-end">
+            <CatHeroImage />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
 
-export default function HijackingLoginStrip(): ReactElement {
+function OnboardingSignupHero({
+  formRef,
+  onAuthStateUpdate,
+}: SigninHeroProps): ReactElement {
+  return (
+    <section className={classNames('mb-4 w-full pb-0', feedStyles.cards)}>
+      <div className="relative overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-raw-pepper-90 shadow-2">
+        <picture>
+          <source
+            media="(max-width: 655px)"
+            srcSet={cloudinaryOnboardingFullBackgroundMobile}
+          />
+          <source
+            media="(min-width: 656px)"
+            srcSet={cloudinaryOnboardingFullBackgroundDesktop}
+          />
+          <img
+            alt=""
+            aria-hidden
+            className="opacity-55 pointer-events-none absolute inset-0 size-full object-cover"
+            role="presentation"
+            src={cloudinaryOnboardingFullBackgroundDesktop}
+          />
+        </picture>
+        <div className="bg-raw-pepper-90/55 pointer-events-none absolute inset-0" />
+        <div className="via-raw-pepper-90/80 from-raw-pepper-90/60 pointer-events-none absolute inset-0 bg-gradient-to-b to-raw-pepper-90/40" />
+        <div className="via-raw-pepper-90/70 pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-raw-pepper-90 to-transparent" />
+        <div className="top-hero-aurora opacity-80 pointer-events-none absolute inset-0" />
+        <div className="via-accent-cabbage-default/80 pointer-events-none absolute bottom-0 left-1/2 h-px w-[86%] -translate-x-1/2 bg-gradient-to-r from-transparent to-transparent" />
+        <div className="dark relative z-1 mx-auto flex min-h-[20rem] w-full max-w-[48rem] flex-col items-center justify-center gap-5 px-6 py-10 text-center tablet:min-h-[24rem] tablet:px-10 tablet:py-12">
+          <div className="flex flex-col items-center">
+            <h2 className="max-w-[42rem] text-balance font-bold text-white typo-title1 tablet:typo-mega2">
+              Where developers make every tab count.
+            </h2>
+            <p className="text-white/75 mt-3 max-w-[31rem] text-balance typo-callout tablet:typo-title3">
+              Sign in to turn daily.dev into your personalized feed, reputation,
+              saves, and community in every new tab.
+            </p>
+          </div>
+          <div className="w-full max-w-[22rem] rounded-24 border border-border-subtlest-tertiary bg-white/[0.045] p-3 text-center backdrop-blur-md tablet:p-4">
+            <AuthOptions
+              ignoreMessages
+              compact
+              formRef={formRef}
+              trigger={AuthTriggers.Onboarding}
+              simplified
+              defaultDisplay={AuthDisplay.OnboardingSignup}
+              forceDefaultDisplay
+              className={{
+                container: 'mx-auto !max-w-none !overflow-visible',
+                onboardingSignup: '!gap-3',
+              }}
+              onAuthStateUpdate={onAuthStateUpdate}
+              onboardingSignupButton={{
+                variant: ButtonVariant.Primary,
+                size: ButtonSize.Large,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const SigninHeroMap = {
+  [HijackingVariant.CTA]: CatStageHero,
+  [HijackingVariant.Auth]: OnboardingSignupHero,
+} satisfies Record<
+  HijackingVariant.CTA | HijackingVariant.Auth,
+  (props: SigninHeroProps) => ReactElement
+>;
+
+function DefaultHijackingStrip(): ReactElement {
   const { showLogin, user } = useAuthContext();
   const { logEvent } = useLogContext();
   const isLoggedOut = !user;
-  const onboardingHref = (() => {
-    const base = new URL(onboardingUrl);
-    base.searchParams.append('r', 'extension');
-
-    return base.toString();
-  })();
 
   const logHijackingClick = (): void => {
     logEvent({
@@ -93,3 +302,217 @@ export default function HijackingLoginStrip(): ReactElement {
     </section>
   );
 }
+
+function HijackingHeroStrip({
+  variant: experimentVariant,
+}: {
+  variant: HijackingVariant.CTA | HijackingVariant.Auth;
+}): ReactElement {
+  const { showLogin, user } = useAuthContext();
+  const { logEvent } = useLogContext();
+  const { signBack, provider, isLoaded: isSignBackLoaded } = useSignBack();
+  const hasLoggedImpression = useRef(false);
+  const authFormRef = useRef<HTMLFormElement>(
+    null,
+  ) as unknown as AuthOptionsProps['formRef'];
+
+  const isLoggedOut = !user;
+  const hasContinueAs = isLoggedOut && isSignBackLoaded && !!signBack?.name;
+  const firstName = signBack?.name?.split(' ')[0] ?? signBack?.name;
+  const socialProvider =
+    provider && provider !== 'password'
+      ? (provider as SocialProvider)
+      : undefined;
+  const providerIcon = socialProvider
+    ? providerMap[socialProvider]?.icon
+    : undefined;
+
+  const variant: CoverVariant = (() => {
+    if (!isLoggedOut) {
+      return 'onboarding';
+    }
+
+    return hasContinueAs ? 'continue' : 'signin';
+  })();
+  const isReadyToLogImpression = !isLoggedOut || isSignBackLoaded;
+
+  const logClick = (targetType: TargetType): void => {
+    logEvent({
+      event_name: LogEvent.Click,
+      target_type: targetType,
+      target_id: 'hijacking',
+    });
+  };
+
+  useEffect(() => {
+    if (!isReadyToLogImpression) {
+      return;
+    }
+
+    if (hasLoggedImpression.current) {
+      return;
+    }
+    hasLoggedImpression.current = true;
+
+    logEvent({
+      event_name: LogEvent.Impression,
+      target_type:
+        variant === 'signin' ? TargetType.SignupButton : TargetType.LoginButton,
+      target_id: 'hijacking',
+    });
+  }, [isReadyToLogImpression, variant, logEvent]);
+
+  const onSignupClick = (): void => {
+    logClick(TargetType.SignupButton);
+    showLogin({
+      trigger: AuthTriggers.Onboarding,
+      options: { isLogin: false },
+    });
+  };
+
+  const onLoginClick = (): void => {
+    logClick(TargetType.LoginButton);
+    showLogin({
+      trigger: AuthTriggers.Onboarding,
+      options: { isLogin: true },
+    });
+  };
+  const onAuthStateUpdate: AuthOptionsProps['onAuthStateUpdate'] = (props) => {
+    showLogin({
+      trigger: AuthTriggers.Onboarding,
+      options: {
+        isLogin: !!props.isLoginFlow,
+        defaultDisplay: props.defaultDisplay,
+        formValues: props.email ? { email: props.email } : undefined,
+      },
+    });
+  };
+  const SigninHero = SigninHeroMap[experimentVariant];
+
+  const chrome = (children: ReactNode): ReactElement => (
+    <section className={classNames('mb-4 w-full pb-0', feedStyles.cards)}>
+      <div className="relative overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-raw-pepper-90 shadow-2">
+        <div className="top-hero-aurora pointer-events-none absolute inset-0" />
+        <div className="dark relative z-1">{children}</div>
+      </div>
+    </section>
+  );
+
+  if (variant === 'onboarding') {
+    return chrome(
+      <div className="flex flex-col items-center px-6 py-14 text-center tablet:py-16">
+        <BrandLockup />
+        <h2
+          className={classNames(
+            'mt-6 text-balance typo-title1 tablet:typo-mega2',
+            onboardingGradientClasses,
+          )}
+        >
+          Let&apos;s jump back in!
+        </h2>
+        <p className="text-white/70 mt-3 max-w-[24rem] text-balance typo-callout tablet:typo-title3">
+          Finish onboarding to unlock the full daily.dev experience.
+        </p>
+        <Button
+          tag="a"
+          href={onboardingHref}
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Large}
+          className={classNames('mt-7', primaryCta)}
+          onClick={() => logClick(TargetType.LoginButton)}
+        >
+          Continue&nbsp;➔
+        </Button>
+      </div>,
+    );
+  }
+
+  if (variant === 'continue' && signBack) {
+    return chrome(
+      <div className="flex flex-col items-center px-6 py-14 text-center tablet:py-16">
+        <div className="relative">
+          <ProfilePicture
+            user={signBack}
+            size={ProfileImageSize.XXXXLarge}
+            nativeLazyLoading
+            className="ring-white/20 ring-2"
+          />
+          {!!providerIcon && (
+            <span className="absolute -bottom-1.5 -right-1.5 flex size-8 items-center justify-center rounded-10 bg-white text-surface-invert shadow-2 ring-2 ring-raw-pepper-90">
+              {providerIcon}
+            </span>
+          )}
+        </div>
+        <h2
+          className={classNames(
+            'mt-6 text-balance typo-title1 tablet:typo-mega2',
+            onboardingGradientClasses,
+          )}
+        >
+          Welcome back, {firstName}!
+        </h2>
+        {!!signBack?.email && (
+          <p className="text-white/70 mt-2 typo-callout">{signBack.email}</p>
+        )}
+        <Button
+          type="button"
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Large}
+          className={classNames('mt-6 w-full max-w-80', primaryCta)}
+          onClick={onLoginClick}
+        >
+          Continue as {firstName}&nbsp;➔
+        </Button>
+        <div className="text-white/60 mt-5 flex items-center gap-1.5 typo-footnote">
+          Not you?
+          <ClickableText
+            className="font-bold !text-white"
+            onClick={onLoginClick}
+          >
+            Use another account
+          </ClickableText>
+        </div>
+        <div className="text-white/60 mt-2 flex items-center gap-1.5 typo-footnote">
+          New here?
+          <ClickableText
+            className="font-bold !text-white"
+            onClick={onSignupClick}
+          >
+            Create an account
+          </ClickableText>
+        </div>
+      </div>,
+    );
+  }
+
+  return (
+    <SigninHero
+      onSignupClick={onSignupClick}
+      onLoginClick={onLoginClick}
+      formRef={authFormRef}
+      onAuthStateUpdate={onAuthStateUpdate}
+    />
+  );
+}
+
+export default function HijackingLoginStrip(): ReactElement | null {
+  const { value, isLoading } = useConditionalFeature({
+    feature: featureHijackingVariants,
+    shouldEvaluate: true,
+  });
+
+  if (isLoading) {
+    return null;
+  }
+
+  const hijackingVariant = value as HijackingVariant;
+
+  if (
+    hijackingVariant === HijackingVariant.CTA ||
+    hijackingVariant === HijackingVariant.Auth
+  ) {
+    return <HijackingHeroStrip variant={hijackingVariant} />;
+  }
+
+  return <DefaultHijackingStrip />;
+}
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index e34256aeedd..c74d8dd83a4 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -210,6 +210,16 @@ export const featureFeedChips = new Feature<FeedChipsVariant>(
   FeedChipsVariant.None,
 );
 
+export enum HijackingVariant {
+  Default = 'default',
+  CTA = 'cta',
+  Auth = 'auth',
+}
+export const featureHijackingVariants = new Feature<HijackingVariant>(
+  'hijacking_variants',
+  HijackingVariant.CTA,
+);
+
 export const featureLayoutV2 = new Feature('layout_v2', false);
 
 export const featureEngagementBarV2 = new Feature('engagement_bar_v2', false);
diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css
index c0d54034400..37eb23d2944 100644
--- a/packages/shared/src/styles/base.css
+++ b/packages/shared/src/styles/base.css
@@ -1080,6 +1080,57 @@ meter::-webkit-meter-bar {
     background: rgb(255 0 168 / 35%);
   }
 
+  .top-hero-aurora {
+    background:
+      radial-gradient(
+        80% 95% at 50% 122%,
+        color-mix(in srgb, var(--theme-accent-cabbage-default), transparent 18%)
+          0%,
+        transparent 62%
+      ),
+      radial-gradient(
+        64% 82% at 16% 128%,
+        color-mix(in srgb, var(--theme-accent-onion-default), transparent 32%) 0%,
+        transparent 58%
+      ),
+      radial-gradient(
+        64% 82% at 84% 128%,
+        color-mix(in srgb, var(--theme-accent-onion-default), transparent 32%) 0%,
+        transparent 58%
+      );
+  }
+
+  .top-hero-stage {
+    background:
+      linear-gradient(
+        118deg,
+        transparent 0%,
+        rgb(255 255 255 / 5%) 42%,
+        transparent 58%
+      ),
+      radial-gradient(
+        78% 88% at 76% 112%,
+        color-mix(in srgb, var(--theme-accent-cabbage-default), transparent 6%)
+          0%,
+        transparent 58%
+      ),
+      radial-gradient(
+        70% 84% at 16% 112%,
+        color-mix(in srgb, var(--theme-accent-onion-default), transparent 20%) 0%,
+        transparent 62%
+      ),
+      radial-gradient(
+        62% 72% at 92% 4%,
+        color-mix(in srgb, var(--theme-accent-bacon-default), transparent 54%) 0%,
+        transparent 58%
+      ),
+      radial-gradient(
+        42% 48% at 26% 16%,
+        rgb(255 255 255 / 8%) 0%,
+        transparent 64%
+      );
+  }
+
   @keyframes enable-notification-bell-ring {
     0%,
     100% {

From 26c4d91f8f5ea58d910de9cf34b84bb32efdda2a Mon Sep 17 00:00:00 2001
From: Amar Trebinjac <amartrebinjac@gmail.com>
Date: Fri, 5 Jun 2026 15:57:31 +0200
Subject: [PATCH 2/3] lead to login instead

---
 .../src/newtab/HijackingLoginStrip.spec.tsx   | 151 ++++++++----------
 .../src/newtab/HijackingLoginStrip.tsx        | 114 +++++--------
 2 files changed, 101 insertions(+), 164 deletions(-)

diff --git a/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx b/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
index a545bc6a827..90aa7d28ba2 100644
--- a/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
+++ b/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
@@ -6,10 +6,7 @@ import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
 import { useConditionalFeature } from '@dailydotdev/shared/src/hooks';
 import { useSignBack } from '@dailydotdev/shared/src/hooks/auth/useSignBack';
-import {
-  AuthDisplay,
-  SocialProvider,
-} from '@dailydotdev/shared/src/components/auth/common';
+import { SocialProvider } from '@dailydotdev/shared/src/components/auth/common';
 import { HijackingVariant } from '@dailydotdev/shared/src/lib/featureManagement';
 import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
 import { onboardingUrl } from '@dailydotdev/shared/src/lib/constants';
@@ -31,44 +28,20 @@ jest.mock('@dailydotdev/shared/src/hooks/auth/useSignBack', () => ({
   useSignBack: jest.fn(),
 }));
 
-jest.mock('@dailydotdev/shared/src/components/auth/AuthOptions', () => {
-  const { AuthDisplay: MockAuthDisplay } = jest.requireActual(
-    '@dailydotdev/shared/src/components/auth/common',
-  );
+const signupHref = (() => {
+  const url = new URL(onboardingUrl);
+  url.searchParams.append('r', 'extension');
 
-  return {
-    __esModule: true,
-    default: ({
-      onAuthStateUpdate,
-    }: {
-      onAuthStateUpdate?: (props: { defaultDisplay?: string }) => void;
-    }) => (
-      <div>
-        <button type="button">Continue with Google</button>
-        <button type="button">Continue with GitHub</button>
-        <button
-          type="button"
-          onClick={() =>
-            onAuthStateUpdate?.({
-              defaultDisplay: MockAuthDisplay.Registration,
-            })
-          }
-        >
-          Continue with email
-        </button>
-        <button
-          type="button"
-          onClick={() =>
-            onAuthStateUpdate?.({ defaultDisplay: MockAuthDisplay.Default })
-          }
-        >
-          Log in
-        </button>
-        <p>By continuing, you agree to the Terms of Service</p>
-      </div>
-    ),
-  };
-});
+  return url.toString();
+})();
+
+const loginHref = (() => {
+  const url = new URL(onboardingUrl);
+  url.searchParams.append('r', 'extension');
+  url.searchParams.append('action', 'login');
+
+  return url.toString();
+})();
 
 const LogContext = getLogContextStatic();
 const mockUseAuthContext = useAuthContext as jest.MockedFunction<
@@ -80,6 +53,7 @@ const mockUseConditionalFeature = useConditionalFeature as jest.MockedFunction<
 >;
 const logEvent = jest.fn();
 const showLogin = jest.fn();
+const assignMock = jest.fn();
 
 const defaultAuthContext = {
   user: undefined,
@@ -157,6 +131,13 @@ const renderComponent = (
   return render(<HijackingLoginStrip />, { wrapper: Wrapper });
 };
 
+beforeAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: { ...window.location, assign: assignMock },
+  });
+});
+
 beforeEach(() => {
   jest.clearAllMocks();
   setVariant(HijackingVariant.Default);
@@ -213,10 +194,8 @@ describe('HijackingLoginStrip', () => {
       ).toBeVisible();
 
       const cta = screen.getByRole('link', { name: 'Continue onboarding' });
-      const expectedUrl = new URL(onboardingUrl);
-      expectedUrl.searchParams.append('r', 'extension');
 
-      expect(cta).toHaveAttribute('href', expectedUrl.toString());
+      expect(cta).toHaveAttribute('href', signupHref);
 
       fireEvent.click(cta);
 
@@ -234,7 +213,7 @@ describe('HijackingLoginStrip', () => {
       setVariant(HijackingVariant.CTA);
     });
 
-    it('shows the cat stage hero with sign up and log in CTAs', () => {
+    it('redirects to the webapp onboarding from the cat stage hero CTAs', () => {
       renderComponent();
 
       expect(
@@ -249,16 +228,15 @@ describe('HijackingLoginStrip', () => {
         target_type: TargetType.SignupButton,
         target_id: 'hijacking',
       });
-      expect(showLogin).toHaveBeenCalledWith({
-        trigger: AuthTriggers.Onboarding,
-        options: { isLogin: false },
-      });
+      expect(assignMock).toHaveBeenCalledWith(signupHref);
 
       fireEvent.click(screen.getByRole('button', { name: 'Log in' }));
-      expect(showLogin).toHaveBeenCalledWith({
-        trigger: AuthTriggers.Onboarding,
-        options: { isLogin: true },
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
       });
+      expect(assignMock).toHaveBeenCalledWith(loginHref);
     });
 
     it('logs a signup impression for new visitors', () => {
@@ -277,7 +255,7 @@ describe('HijackingLoginStrip', () => {
       setVariant(HijackingVariant.Auth);
     });
 
-    it('encourages signup for logged out users without a remembered account', () => {
+    it('redirects social and email sign-up options to the webapp onboarding', () => {
       renderComponent();
 
       expect(
@@ -286,31 +264,33 @@ describe('HijackingLoginStrip', () => {
         }),
       ).toBeVisible();
 
-      expect(
-        screen.getByRole('button', { name: 'Continue with Google' }),
-      ).toBeVisible();
-      expect(
+      fireEvent.click(
         screen.getByRole('button', { name: 'Continue with GitHub' }),
-      ).toBeVisible();
-      expect(
-        screen.getByRole('button', { name: 'Continue with email' }),
-      ).toBeVisible();
-      expect(
-        screen.getByText(/By continuing, you agree to the Terms of Service/),
-      ).toBeVisible();
+      );
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.SignupButton,
+        target_id: 'hijacking',
+      });
+      expect(assignMock).toHaveBeenCalledWith(signupHref);
 
       fireEvent.click(
-        screen.getByRole('button', { name: 'Continue with email' }),
+        screen.getByRole('button', { name: 'Signup using email' }),
       );
+      expect(assignMock).toHaveBeenCalledWith(signupHref);
+    });
 
-      expect(showLogin).toHaveBeenCalledWith({
-        trigger: AuthTriggers.Onboarding,
-        options: {
-          isLogin: false,
-          defaultDisplay: AuthDisplay.Registration,
-          formValues: undefined,
-        },
+    it('redirects the log in link to the webapp onboarding login flow', () => {
+      renderComponent();
+
+      fireEvent.click(screen.getByRole('button', { name: 'Log in' }));
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
       });
+      expect(assignMock).toHaveBeenCalledWith(loginHref);
     });
 
     it('logs a signup impression for new visitors', () => {
@@ -335,7 +315,9 @@ describe('HijackingLoginStrip', () => {
 
       const { rerender } = renderComponent();
 
-      expect(logEvent).not.toHaveBeenCalled();
+      expect(logEvent).not.toHaveBeenCalledWith(
+        expect.objectContaining({ event_name: LogEvent.Impression }),
+      );
 
       signBackState = {
         isLoaded: true,
@@ -365,7 +347,7 @@ describe('HijackingLoginStrip', () => {
       });
     });
 
-    it('offers a welcome-back "Continue as" for users with a remembered account', () => {
+    it('offers a welcome-back "Continue as" that redirects to the login flow', () => {
       mockUseSignBack.mockReturnValue({
         isLoaded: true,
         signBack: {
@@ -384,18 +366,16 @@ describe('HijackingLoginStrip', () => {
       ).toBeVisible();
       expect(screen.getByText('tsahi@daily.dev')).toBeVisible();
 
-      const cta = screen.getByRole('button', { name: /Continue as Tsahi/ });
-      fireEvent.click(cta);
+      fireEvent.click(
+        screen.getByRole('button', { name: /Continue as Tsahi/ }),
+      );
 
       expect(logEvent).toHaveBeenCalledWith({
-        event_name: LogEvent.Impression,
+        event_name: LogEvent.Click,
         target_type: TargetType.LoginButton,
         target_id: 'hijacking',
       });
-      expect(showLogin).toHaveBeenCalledWith({
-        trigger: AuthTriggers.Onboarding,
-        options: { isLogin: true },
-      });
+      expect(assignMock).toHaveBeenCalledWith(loginHref);
     });
 
     it('lets remembered users create a different account', () => {
@@ -416,10 +396,7 @@ describe('HijackingLoginStrip', () => {
         screen.getByRole('button', { name: 'Create an account' }),
       );
 
-      expect(showLogin).toHaveBeenCalledWith({
-        trigger: AuthTriggers.Onboarding,
-        options: { isLogin: false },
-      });
+      expect(assignMock).toHaveBeenCalledWith(signupHref);
     });
 
     it('shows an onboarding CTA for logged in users who still need onboarding', () => {
@@ -432,10 +409,8 @@ describe('HijackingLoginStrip', () => {
       ).toBeVisible();
 
       const cta = screen.getByRole('link', { name: /Continue/ });
-      const expectedUrl = new URL(onboardingUrl);
-      expectedUrl.searchParams.append('r', 'extension');
 
-      expect(cta).toHaveAttribute('href', expectedUrl.toString());
+      expect(cta).toHaveAttribute('href', signupHref);
 
       fireEvent.click(cta);
 
diff --git a/packages/extension/src/newtab/HijackingLoginStrip.tsx b/packages/extension/src/newtab/HijackingLoginStrip.tsx
index 24e8b57b589..ed8562ee063 100644
--- a/packages/extension/src/newtab/HijackingLoginStrip.tsx
+++ b/packages/extension/src/newtab/HijackingLoginStrip.tsx
@@ -7,14 +7,13 @@ import {
   ButtonVariant,
 } from '@dailydotdev/shared/src/components/buttons/Button';
 import { ClickableText } from '@dailydotdev/shared/src/components/buttons/ClickableText';
-import AuthOptions from '@dailydotdev/shared/src/components/auth/AuthOptions';
+import { OnboardingRegistrationForm } from '@dailydotdev/shared/src/components/auth/OnboardingRegistrationForm';
 import {
   ProfileImageSize,
   ProfilePicture,
 } from '@dailydotdev/shared/src/components/ProfilePicture';
 import {
-  AuthDisplay,
-  type AuthOptionsProps,
+  OnboardingActions,
   providerMap,
   type SocialProvider,
 } from '@dailydotdev/shared/src/components/auth/common';
@@ -47,12 +46,21 @@ const primaryCta =
 const glassCta =
   '!border-white/20 !bg-white/[0.06] !text-white backdrop-blur-sm transition-colors duration-200 hover:!bg-white/[0.12]';
 
-const onboardingHref = (() => {
+// The extension can't run social OAuth from its own origin (the API rejects it
+// with a 403). Instead we hand auth off to the webapp onboarding flow, which
+// runs on a trusted origin and auto-triggers the relevant auth screen.
+const buildOnboardingHref = (action?: OnboardingActions): string => {
   const base = new URL(onboardingUrl);
   base.searchParams.append('r', 'extension');
+  if (action) {
+    base.searchParams.append('action', action);
+  }
 
   return base.toString();
-})();
+};
+
+const onboardingHref = buildOnboardingHref();
+const loginHref = buildOnboardingHref(OnboardingActions.Login);
 
 function BrandLockup(): ReactElement {
   return (
@@ -76,20 +84,15 @@ function CatHeroImage(): ReactElement {
 }
 
 interface SigninHeroProps {
-  onSignupClick: () => void;
-  onLoginClick: () => void;
-  formRef: AuthOptionsProps['formRef'];
-  onAuthStateUpdate: AuthOptionsProps['onAuthStateUpdate'];
+  onSignup: () => void;
+  onLogin: () => void;
 }
 
-type HeroActionButtonsProps = Pick<
-  SigninHeroProps,
-  'onSignupClick' | 'onLoginClick'
->;
+type HeroActionButtonsProps = SigninHeroProps;
 
 function HeroActionButtons({
-  onSignupClick,
-  onLoginClick,
+  onSignup,
+  onLogin,
 }: HeroActionButtonsProps): ReactElement {
   return (
     <div className="mt-8 flex w-full max-w-[23rem] flex-row gap-3 tablet:mx-0">
@@ -98,7 +101,7 @@ function HeroActionButtons({
         variant={ButtonVariant.Primary}
         size={ButtonSize.Large}
         className={classNames('flex-1', primaryCta)}
-        onClick={onSignupClick}
+        onClick={onSignup}
       >
         Sign up
       </Button>
@@ -107,7 +110,7 @@ function HeroActionButtons({
         variant={ButtonVariant.Secondary}
         size={ButtonSize.Large}
         className={classNames('flex-1', glassCta)}
-        onClick={onLoginClick}
+        onClick={onLogin}
       >
         Log in
       </Button>
@@ -115,10 +118,7 @@ function HeroActionButtons({
   );
 }
 
-function CatStageHero({
-  onSignupClick,
-  onLoginClick,
-}: SigninHeroProps): ReactElement {
+function CatStageHero({ onSignup, onLogin }: SigninHeroProps): ReactElement {
   return (
     <section className={classNames('mb-4 w-full pb-0', feedStyles.cards)}>
       <div className="relative overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-raw-pepper-90 shadow-2">
@@ -141,10 +141,7 @@ function CatStageHero({
               Sign in and daily.dev will remember the topics, saves, upvotes,
               and discussions that matter to you.
             </p>
-            <HeroActionButtons
-              onSignupClick={onSignupClick}
-              onLoginClick={onLoginClick}
-            />
+            <HeroActionButtons onSignup={onSignup} onLogin={onLogin} />
           </div>
           <div className="flex justify-center tablet:justify-end">
             <CatHeroImage />
@@ -156,8 +153,8 @@ function CatStageHero({
 }
 
 function OnboardingSignupHero({
-  formRef,
-  onAuthStateUpdate,
+  onSignup,
+  onLogin,
 }: SigninHeroProps): ReactElement {
   return (
     <section className={classNames('mb-4 w-full pb-0', feedStyles.cards)}>
@@ -195,19 +192,16 @@ function OnboardingSignupHero({
             </p>
           </div>
           <div className="w-full max-w-[22rem] rounded-24 border border-border-subtlest-tertiary bg-white/[0.045] p-3 text-center backdrop-blur-md tablet:p-4">
-            <AuthOptions
-              ignoreMessages
+            <OnboardingRegistrationForm
+              isReady
               compact
-              formRef={formRef}
               trigger={AuthTriggers.Onboarding}
-              simplified
-              defaultDisplay={AuthDisplay.OnboardingSignup}
-              forceDefaultDisplay
+              onProviderClick={onSignup}
+              onContinueWithEmail={onSignup}
+              onExistingEmail={onLogin}
               className={{
-                container: 'mx-auto !max-w-none !overflow-visible',
                 onboardingSignup: '!gap-3',
               }}
-              onAuthStateUpdate={onAuthStateUpdate}
               onboardingSignupButton={{
                 variant: ButtonVariant.Primary,
                 size: ButtonSize.Large,
@@ -308,13 +302,10 @@ function HijackingHeroStrip({
 }: {
   variant: HijackingVariant.CTA | HijackingVariant.Auth;
 }): ReactElement {
-  const { showLogin, user } = useAuthContext();
+  const { user } = useAuthContext();
   const { logEvent } = useLogContext();
   const { signBack, provider, isLoaded: isSignBackLoaded } = useSignBack();
   const hasLoggedImpression = useRef(false);
-  const authFormRef = useRef<HTMLFormElement>(
-    null,
-  ) as unknown as AuthOptionsProps['formRef'];
 
   const isLoggedOut = !user;
   const hasContinueAs = isLoggedOut && isSignBackLoaded && !!signBack?.name;
@@ -362,30 +353,14 @@ function HijackingHeroStrip({
     });
   }, [isReadyToLogImpression, variant, logEvent]);
 
-  const onSignupClick = (): void => {
+  const onSignup = (): void => {
     logClick(TargetType.SignupButton);
-    showLogin({
-      trigger: AuthTriggers.Onboarding,
-      options: { isLogin: false },
-    });
+    window.location.assign(onboardingHref);
   };
 
-  const onLoginClick = (): void => {
+  const onLogin = (): void => {
     logClick(TargetType.LoginButton);
-    showLogin({
-      trigger: AuthTriggers.Onboarding,
-      options: { isLogin: true },
-    });
-  };
-  const onAuthStateUpdate: AuthOptionsProps['onAuthStateUpdate'] = (props) => {
-    showLogin({
-      trigger: AuthTriggers.Onboarding,
-      options: {
-        isLogin: !!props.isLoginFlow,
-        defaultDisplay: props.defaultDisplay,
-        formValues: props.email ? { email: props.email } : undefined,
-      },
-    });
+    window.location.assign(loginHref);
   };
   const SigninHero = SigninHeroMap[experimentVariant];
 
@@ -459,25 +434,19 @@ function HijackingHeroStrip({
           variant={ButtonVariant.Primary}
           size={ButtonSize.Large}
           className={classNames('mt-6 w-full max-w-80', primaryCta)}
-          onClick={onLoginClick}
+          onClick={onLogin}
         >
           Continue as {firstName}&nbsp;➔
         </Button>
         <div className="text-white/60 mt-5 flex items-center gap-1.5 typo-footnote">
           Not you?
-          <ClickableText
-            className="font-bold !text-white"
-            onClick={onLoginClick}
-          >
+          <ClickableText className="font-bold !text-white" onClick={onLogin}>
             Use another account
           </ClickableText>
         </div>
         <div className="text-white/60 mt-2 flex items-center gap-1.5 typo-footnote">
           New here?
-          <ClickableText
-            className="font-bold !text-white"
-            onClick={onSignupClick}
-          >
+          <ClickableText className="font-bold !text-white" onClick={onSignup}>
             Create an account
           </ClickableText>
         </div>
@@ -485,14 +454,7 @@ function HijackingHeroStrip({
     );
   }
 
-  return (
-    <SigninHero
-      onSignupClick={onSignupClick}
-      onLoginClick={onLoginClick}
-      formRef={authFormRef}
-      onAuthStateUpdate={onAuthStateUpdate}
-    />
-  );
+  return <SigninHero onSignup={onSignup} onLogin={onLogin} />;
 }
 
 export default function HijackingLoginStrip(): ReactElement | null {

From b5d873ef2537e5f643db8ac110f2aa484e1bd060 Mon Sep 17 00:00:00 2001
From: Amar Trebinjac <amartrebinjac@gmail.com>
Date: Fri, 5 Jun 2026 16:01:14 +0200
Subject: [PATCH 3/3] set default

---
 packages/shared/src/lib/featureManagement.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index c74d8dd83a4..f349e0e8608 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -217,7 +217,7 @@ export enum HijackingVariant {
 }
 export const featureHijackingVariants = new Feature<HijackingVariant>(
   'hijacking_variants',
-  HijackingVariant.CTA,
+  HijackingVariant.Default,
 );
 
 export const featureLayoutV2 = new Feature('layout_v2', false);