A Supabase Auth UI alternative for Next.js

The Auth UI repo is archived and its React package hasn't shipped since January 2024. Here is the sign-in screen rebuilt on supabase-js directly: the spotlight lamp login, with Supabase's own error text and a redirect when it works.

One payment$3

By buying you agree to the Terms.

Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/login/page.tsx

"use client";
// Before:
// <Auth supabaseClient={supabase} view="sign_in" appearance={{ theme: ThemeSupa }} />
import { useRouter } from "next/navigation";
import SpotlightLampLogin from "@/components/SpotlightLampLogin";
import { createClient } from "@/lib/supabase/client";

export default function LoginPage() {
  const router = useRouter();
  const supabase = createClient(); // was the supabaseClient prop

  return (
    <div className="h-dvh">
      <SpotlightLampLogin
        autoplayDemo={false}
        onSignIn={async (email, password) => {
          // the call Auth UI made for you in view="sign_in"
          const { error } = await supabase.auth.signInWithPassword({ email, password });
          // Supabase's message ("Invalid login credentials") shows under the password field
          return error ? { ok: false, message: error.message } : { ok: true };
        }}
        onSuccess={() => {
          // Auth UI left this to an onAuthStateChange listener
          router.push("/dashboard");
          router.refresh();
        }}
      />
    </div>
  );
}

lib/supabase/client.ts

import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!);
}

Good to know

@supabase/auth-ui-react 0.4.7 is the latest release, published January 4, 2024. The GitHub repo (supabase-community/auth-ui) is archived, and its README says: "As of 7th Feb 2024, this repository is no longer maintained by the Supabase Team." npm still counted 89,087 downloads in the last week of October 2026.
Its package.json lists react and react-dom ^18.2.0 as regular dependencies, not peer dependencies. We installed it next to React 19 with npm 10 and npm put a separate React 18.3.1 under the package. React's docs name a duplicate copy of React as one cause of the "Invalid hook call" error.
If the old component still works in your app and you need every view in one place (sign-up, magic link, forgot password), keeping it is a fair call. It just won't get fixes. Supabase's own UI Library also has a free password-based auth block for Next.js with plain shadcn/ui forms, and that's the better pick if you want all the pages and no animation.
The lamp is for the sign-in screen people see every day. It's a full-screen scene, so give it a parent with a real height (h-dvh above).
This is the browser half. For server components and middleware to see the session, add the cookie setup from Supabase's Next.js server-side auth guide.

What each Auth UI prop becomes

supabaseClient: you create the client yourself (lib/supabase/client.ts) and call it inside onSignIn.
view="sign_in": the lamp login is this view. Return { ok: false, message } from onSignIn and Supabase's text shows under the password field.
redirectTo: Auth UI used it for email links and OAuth. After a password sign-in you navigate in onSuccess, as in the snippet.
appearance and theme: the lamp has its own look, set in a CSS file next to the component. The code is yours to edit, so colours and fonts change there.
localization.variables: the labels are plain strings in the component file. Change them in place.
view="sign_up", "magic_link", "forgotten_password" and providers: these aren't in the lamp. Our Supabase sign-up page and Supabase Google login guides cover sign-up and Google, or use Supabase's UI Library blocks for those screens.

Install

Copy from the zipPut react/src/components + react/src/data into src/, then npm uninstall @supabase/auth-ui-react @supabase/auth-ui-shared && npm i @supabase/supabase-js @supabase/ssr.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

onSignIn: (email, password) → { ok, message? }
onSuccess: runs after the light floods the screen
autoplayDemo: false for a real page
data: names shown after sign-in

How qodesign compares

qodesign vs Magic UIMagic UI is best for: landing pages built with shadcn/ui.
qodesign vs Aceternity UIAceternity UI is best for: teams building many marketing pages who want one big library.

All comparisons, with prices read on each library's own site.

Questions

Is @supabase/auth-ui-react deprecated?

npm doesn't mark it deprecated, but the repo is archived and the README says the Supabase team stopped maintaining it on 7 February 2024. The last release is 0.4.7 from January 2024.

Does the lamp work with the new Supabase publishable keys?

Yes. createBrowserClient takes whichever key you put in the env var.

Does it do sign-up and magic links like Auth UI did?

No. It's one sign-in screen. Link to your own sign-up page, or use our Supabase sign-up page guide.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.