diff --git a/examples/nextjs-ssr/app/authenticated-app.tsx b/examples/nextjs-ssr/app/authenticated-app.tsx
new file mode 100644
index 000000000..ed6a7f0cb
--- /dev/null
+++ b/examples/nextjs-ssr/app/authenticated-app.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+import { multiFactor, sendEmailVerification, signOut } from "firebase/auth";
+import { useRouter } from "next/navigation";
+import { useUser } from "@/lib/firebase/hooks";
+import { auth } from "@/lib/firebase/clientApp";
+import { type User } from "firebase/auth";
+
+export function AuthenticatedApp({ initialUser }: { initialUser: User | null }) {
+  const user = useUser(initialUser);
+  const router = useRouter();
+
+  if (!user) {
+    return null;
+  }
+
+  const mfa = multiFactor(user);
+
+  return (
+    <div className="max-w-sm mx-auto pt-36 space-y-6 pb-36">
+      <div className="border border-neutral-200 dark:border-neutral-800 rounded-md p-4 space-y-4">
+        <h1 className="text-md font-medium">Welcome, {user.displayName || user.email || user.phoneNumber}</h1>
+        {user.email ? (
+          <>
+            {user.emailVerified ? (
+              <div className="text-green-500">Email verified</div>
+            ) : (
+              <button
+                className="bg-red-500 text-white px-3 py-1.5 rounded text-sm"
+                onClick={async () => {
+                  try {
+                    await sendEmailVerification(user);
+                    alert("Email verification sent, please check your email");
+                  } catch (error) {
+                    console.error(error);
+                    alert("Error sending email verification, check console");
+                  }
+                }}
+              >
+                Verify Email &rarr;
+              </button>
+            )}
+          </>
+        ) : null}
+
+        <hr className="opacity-30" />
+        <h2 className="text-sm font-medium">Multi-factor Authentication</h2>
+        {mfa.enrolledFactors.map((factor) => {
+          return (
+            <div key={factor.factorId}>
+              {factor.factorId} - {factor.displayName}
+            </div>
+          );
+        })}
+        <button
+          className="bg-blue-500 text-white px-3 py-1.5 rounded text-sm"
+          onClick={() => {
+            router.push("/screens/mfa-enrollment-screen");
+          }}
+        >
+          Add MFA Factor &rarr;
+        </button>
+        <hr className="opacity-30" />
+        <button
+          className="bg-blue-500 text-white px-3 py-1.5 rounded text-sm"
+          onClick={async () => await signOut(auth)}
+        >
+          Sign Out &rarr;
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/nextjs-ssr/app/globals.css b/examples/nextjs-ssr/app/globals.css
index 7e62d3ba8..1fda7fe64 100644
--- a/examples/nextjs-ssr/app/globals.css
+++ b/examples/nextjs-ssr/app/globals.css
@@ -15,7 +15,25 @@
  */
 
 @import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
 @import "@invertase/firebaseui-styles/tailwind";
 
+/* Prevent flash by hiding content until theme is loaded */
+html:not(.theme-loaded) body {
+  visibility: hidden;
+}
+
+html.theme-loaded body {
+  visibility: visible;
+}
+
+.fui-provider__button[data-provider="oidc.line"][data-themed="true"] {
+  --line-primary: #07B53B;
+  --color-primary: var(--line-primary);
+  --color-primary-hover: --alpha(var(--line-primary) / 85%);
+  --color-primary-surface: #FFFFFF;
+  --color-border: var(--line-primary);
+}
+
 /* @import "@invertase/firebaseui-styles/themes/dark.css"; */
 /* @import "@invertase/firebaseui-styles/themes/brutalist.css"; */
diff --git a/examples/nextjs-ssr/app/layout.tsx b/examples/nextjs-ssr/app/layout.tsx
index bea3a80e7..425dab048 100644
--- a/examples/nextjs-ssr/app/layout.tsx
+++ b/examples/nextjs-ssr/app/layout.tsx
@@ -14,24 +14,13 @@
  * limitations under the License.
  */
 
-import { getCurrentUser } from "@/lib/firebase/serverApp";
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-
-import { Header } from "@/lib/components/header";
+import Script from "next/script";
 import { FirebaseUIProviderHoc } from "@/lib/firebase/ui";
+import { ThemeToggle } from "@/lib/components/theme-toggle";
+import { PirateToggle } from "@/lib/components/pirate-toggle";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Create Next App (SSR)",
   description: "Generated by create next app with SSR",
@@ -42,13 +31,36 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { currentUser } = await getCurrentUser();
-
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <Header currentUser={currentUser} />
-        <FirebaseUIProviderHoc>{children}</FirebaseUIProviderHoc>
+    <html lang="en" suppressHydrationWarning>
+      <body className="dark:bg-neutral-900 dark:text-white" suppressHydrationWarning>
+        <Script
+          id="dark-mode-init"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+              !(function() {
+                try {
+                  var theme = localStorage.getItem('theme');
+                  var isDark = theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches);
+                  if (isDark) {
+                    document.documentElement.classList.add('dark');
+                  }
+                  // Mark theme as loaded - this removes the visibility:hidden
+                  document.documentElement.classList.add('theme-loaded');
+                } catch (e) {
+                  // If anything fails, still show content
+                  document.documentElement.classList.add('theme-loaded');
+                }
+              })();
+            `,
+          }}
+        />
+        <FirebaseUIProviderHoc>
+          <ThemeToggle />
+          <PirateToggle />
+          {children}
+        </FirebaseUIProviderHoc>
       </body>
     </html>
   );
diff --git a/examples/nextjs-ssr/app/page.tsx b/examples/nextjs-ssr/app/page.tsx
index 85aefa3f9..daba31470 100644
--- a/examples/nextjs-ssr/app/page.tsx
+++ b/examples/nextjs-ssr/app/page.tsx
@@ -15,75 +15,15 @@
  */
 
 import { getCurrentUser } from "@/lib/firebase/serverApp";
-import Link from "next/link";
+import { UnauthenticatedApp } from "./unauthenticated-app";
+import { AuthenticatedApp } from "./authenticated-app";
 
 export default async function Home() {
   const { currentUser } = await getCurrentUser();
 
-  return (
-    <div className="p-8 ">
-      <h1 className="text-3xl font-bold mb-6">Firebase UI Demo (SSR)</h1>
-      <div className="mb-6">{currentUser && <div>Welcome: {currentUser.email || currentUser.phoneNumber}</div>}</div>
-      <div>
-        <h2 className="text-2xl font-bold mb-4">Auth Screens</h2>
-        <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-          <li>
-            <Link href="/screens/sign-in-auth-screen" className="text-blue-500 hover:underline">
-              Sign In Auth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/sign-in-auth-screen-w-handlers" className="text-blue-500 hover:underline">
-              Sign In Auth Screen with Handlers
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/sign-in-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Sign In Auth Screen with OAuth
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/email-link-auth-screen" className="text-blue-500 hover:underline">
-              Email Link Auth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/email-link-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Email Link Auth Screen with OAuth
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/phone-auth-screen" className="text-blue-500 hover:underline">
-              Phone Auth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/phone-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Phone Auth Screen with OAuth
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/sign-up-auth-screen" className="text-blue-500 hover:underline">
-              Sign Up Auth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/sign-up-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Sign Up Auth Screen with OAuth
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/oauth-screen" className="text-blue-500 hover:underline">
-              OAuth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/password-reset-screen" className="text-blue-500 hover:underline">
-              Password Reset Screen
-            </Link>
-          </li>
-        </ul>
-      </div>
-    </div>
-  );
+  if (currentUser) {
+    return <AuthenticatedApp initialUser={currentUser} />;
+  }
+
+  return <UnauthenticatedApp />;
 }
diff --git a/examples/nextjs-ssr/app/screens/email-link-auth-screen-w-oauth/page.tsx b/examples/nextjs-ssr/app/screens/email-link-auth-screen-w-oauth/page.tsx
index 2886c4113..97cb74e0d 100644
--- a/examples/nextjs-ssr/app/screens/email-link-auth-screen-w-oauth/page.tsx
+++ b/examples/nextjs-ssr/app/screens/email-link-auth-screen-w-oauth/page.tsx
@@ -16,12 +16,59 @@
 
 "use client";
 
-import { EmailLinkAuthScreen, GoogleSignInButton } from "@invertase/firebaseui-react";
+import {
+  AppleSignInButton,
+  EmailLinkAuthScreen,
+  FacebookSignInButton,
+  GitHubSignInButton,
+  GoogleSignInButton,
+  MicrosoftSignInButton,
+  TwitterSignInButton,
+  OAuthButton,
+} from "@invertase/firebaseui-react";
+import { OAuthProvider } from "firebase/auth";
+import { useRouter } from "next/navigation";
 
 export default function EmailLinkAuthScreenWithOAuthPage() {
+  const router = useRouter();
+
   return (
-    <EmailLinkAuthScreen>
+    <EmailLinkAuthScreen
+      onEmailSent={() => {
+        alert("Email has been sent - please check your email");
+      }}
+      onSignIn={(credential) => {
+        console.log(credential);
+        router.push("/");
+      }}
+    >
       <GoogleSignInButton />
+      <FacebookSignInButton />
+      <AppleSignInButton />
+      <GitHubSignInButton />
+      <MicrosoftSignInButton />
+      <TwitterSignInButton />
+      <LineSignInButton />
     </EmailLinkAuthScreen>
   );
 }
+
+function LineSignInButton() {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}
diff --git a/examples/nextjs-ssr/app/screens/layout.tsx b/examples/nextjs-ssr/app/screens/layout.tsx
new file mode 100644
index 000000000..392b2d1fb
--- /dev/null
+++ b/examples/nextjs-ssr/app/screens/layout.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Link from "next/link";
+
+export default function ScreensLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="p-8">
+      <Link
+        href="/"
+        className="border border-gray-300 dark:border-gray-700 border-rounded px-4 py-2 rounded-md text-sm inline-block"
+      >
+        &larr; Back to overview
+      </Link>
+      <div className="pt-12">{children}</div>
+    </div>
+  );
+}
diff --git a/examples/nextjs-ssr/app/screens/oauth-screen/page.tsx b/examples/nextjs-ssr/app/screens/oauth-screen/page.tsx
index 46872be1e..04049a4f5 100644
--- a/examples/nextjs-ssr/app/screens/oauth-screen/page.tsx
+++ b/examples/nextjs-ssr/app/screens/oauth-screen/page.tsx
@@ -16,12 +16,57 @@
 
 "use client";
 
-import { GoogleSignInButton, OAuthScreen } from "@invertase/firebaseui-react";
+import { useState } from "react";
+import { OAuthProvider } from "firebase/auth";
+import {
+  OAuthButton,
+  FacebookSignInButton,
+  AppleSignInButton,
+  GitHubSignInButton,
+  GoogleSignInButton,
+  MicrosoftSignInButton,
+  OAuthScreen,
+  TwitterSignInButton,
+} from "@invertase/firebaseui-react";
 
 export default function OAuthScreenPage() {
+  const [themed, setThemed] = useState(false);
+
+  return (
+    <>
+      <OAuthScreen>
+        <GoogleSignInButton themed={themed ? "neutral" : undefined} />
+        <FacebookSignInButton themed={themed} />
+        <AppleSignInButton themed={themed} />
+        <GitHubSignInButton themed={themed} />
+        <MicrosoftSignInButton themed={themed} />
+        <TwitterSignInButton themed={themed} />
+        <LineSignInButton themed={themed} />
+      </OAuthScreen>
+      <div className="flex items-center gap-2 max-w-sm mx-auto mt-12">
+        <input type="checkbox" checked={themed} onChange={() => setThemed(!themed)} />
+        <label htmlFor="remember-me">Themed buttons</label>
+      </div>
+    </>
+  );
+}
+
+function LineSignInButton({ themed }: { themed?: boolean | string }) {
+  const provider = new OAuthProvider("oidc.line");
+
   return (
-    <OAuthScreen>
-      <GoogleSignInButton />
-    </OAuthScreen>
+    <OAuthButton provider={provider} themed={themed}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
   );
 }
diff --git a/examples/nextjs-ssr/app/screens/phone-auth-screen-w-oauth/page.tsx b/examples/nextjs-ssr/app/screens/phone-auth-screen-w-oauth/page.tsx
index abb815b59..5a0f3ff6a 100644
--- a/examples/nextjs-ssr/app/screens/phone-auth-screen-w-oauth/page.tsx
+++ b/examples/nextjs-ssr/app/screens/phone-auth-screen-w-oauth/page.tsx
@@ -16,12 +16,56 @@
 
 "use client";
 
-import { GoogleSignInButton, PhoneAuthScreen } from "@invertase/firebaseui-react";
+import {
+  FacebookSignInButton,
+  GitHubSignInButton,
+  AppleSignInButton,
+  GoogleSignInButton,
+  PhoneAuthScreen,
+  TwitterSignInButton,
+  MicrosoftSignInButton,
+  OAuthButton,
+} from "@invertase/firebaseui-react";
+import { OAuthProvider } from "firebase/auth";
+import { useRouter } from "next/navigation";
 
 export default function PhoneAuthScreenWithOAuthPage() {
+  const router = useRouter();
+
   return (
-    <PhoneAuthScreen>
+    <PhoneAuthScreen
+      onSignIn={(credential) => {
+        console.log(credential);
+        router.push("/");
+      }}
+    >
       <GoogleSignInButton />
+      <FacebookSignInButton />
+      <AppleSignInButton />
+      <GitHubSignInButton />
+      <MicrosoftSignInButton />
+      <TwitterSignInButton />
+      <LineSignInButton />
     </PhoneAuthScreen>
   );
 }
+
+function LineSignInButton() {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}
diff --git a/examples/nextjs-ssr/app/screens/sign-in-auth-screen-w-oauth/page.tsx b/examples/nextjs-ssr/app/screens/sign-in-auth-screen-w-oauth/page.tsx
index 4789f1f98..94f26ce41 100644
--- a/examples/nextjs-ssr/app/screens/sign-in-auth-screen-w-oauth/page.tsx
+++ b/examples/nextjs-ssr/app/screens/sign-in-auth-screen-w-oauth/page.tsx
@@ -16,7 +16,17 @@
 
 "use client";
 
-import { GoogleSignInButton, SignInAuthScreen } from "@invertase/firebaseui-react";
+import {
+  AppleSignInButton,
+  GoogleSignInButton,
+  SignInAuthScreen,
+  FacebookSignInButton,
+  GitHubSignInButton,
+  MicrosoftSignInButton,
+  TwitterSignInButton,
+  OAuthButton,
+} from "@invertase/firebaseui-react";
+import { OAuthProvider } from "firebase/auth";
 import { useRouter } from "next/navigation";
 
 export default function SignInAuthScreenWithOAuthPage() {
@@ -24,12 +34,40 @@ export default function SignInAuthScreenWithOAuthPage() {
 
   return (
     <SignInAuthScreen
-      onForgotPasswordClick={() => router.push("/password-reset-screen")}
-      onSignIn={() => {
+      onSignIn={(credential) => {
+        console.log(credential);
         router.push("/");
       }}
     >
-      <GoogleSignInButton />
+      <div className="space-y-2">
+        <GoogleSignInButton />
+        <FacebookSignInButton />
+        <AppleSignInButton />
+        <GitHubSignInButton />
+        <MicrosoftSignInButton />
+        <TwitterSignInButton />
+        <LineSignInButton />
+      </div>
     </SignInAuthScreen>
   );
 }
+
+function LineSignInButton() {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}
diff --git a/examples/nextjs-ssr/app/screens/sign-up-auth-screen-w-handlers/page.tsx b/examples/nextjs-ssr/app/screens/sign-up-auth-screen-w-handlers/page.tsx
new file mode 100644
index 000000000..eed16bfc9
--- /dev/null
+++ b/examples/nextjs-ssr/app/screens/sign-up-auth-screen-w-handlers/page.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+import { SignUpAuthScreen } from "@invertase/firebaseui-react";
+import { useRouter } from "next/navigation";
+
+export default function SignUpAuthScreenWithHandlersPage() {
+  const router = useRouter();
+
+  return (
+    <SignUpAuthScreen
+      onSignInClick={() => {
+        router.push("/screens/sign-in-auth-screen");
+      }}
+      onSignUp={(credential) => {
+        console.log(credential);
+        router.push("/");
+      }}
+    />
+  );
+}
diff --git a/examples/nextjs-ssr/app/screens/sign-up-auth-screen-w-oauth/page.tsx b/examples/nextjs-ssr/app/screens/sign-up-auth-screen-w-oauth/page.tsx
index 4c649f2e9..6c8c28749 100644
--- a/examples/nextjs-ssr/app/screens/sign-up-auth-screen-w-oauth/page.tsx
+++ b/examples/nextjs-ssr/app/screens/sign-up-auth-screen-w-oauth/page.tsx
@@ -16,12 +16,56 @@
 
 "use client";
 
-import { GoogleSignInButton, SignUpAuthScreen } from "@invertase/firebaseui-react";
+import {
+  FacebookSignInButton,
+  GitHubSignInButton,
+  AppleSignInButton,
+  GoogleSignInButton,
+  SignUpAuthScreen,
+  TwitterSignInButton,
+  MicrosoftSignInButton,
+  OAuthButton,
+} from "@invertase/firebaseui-react";
+import { OAuthProvider } from "firebase/auth";
+import { useRouter } from "next/navigation";
 
 export default function SignUpAuthScreenWithOAuthPage() {
+  const router = useRouter();
+
   return (
-    <SignUpAuthScreen>
+    <SignUpAuthScreen
+      onSignUp={(credential) => {
+        console.log(credential);
+        router.push("/");
+      }}
+    >
       <GoogleSignInButton />
+      <FacebookSignInButton />
+      <AppleSignInButton />
+      <GitHubSignInButton />
+      <MicrosoftSignInButton />
+      <TwitterSignInButton />
+      <LineSignInButton />
     </SignUpAuthScreen>
   );
 }
+
+function LineSignInButton() {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}
diff --git a/examples/nextjs-ssr/app/unauthenticated-app.tsx b/examples/nextjs-ssr/app/unauthenticated-app.tsx
new file mode 100644
index 000000000..0a61c76e5
--- /dev/null
+++ b/examples/nextjs-ssr/app/unauthenticated-app.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+import { MultiFactorAuthAssertionScreen, useUI } from "@invertase/firebaseui-react";
+import { routes } from "@/lib/routes";
+import Link from "next/link";
+
+export function UnauthenticatedApp() {
+  const ui = useUI();
+
+  // This can trigger if the user is not on a screen already, and gets an MFA challenge - e.g. on One-Tap sign in.
+  if (ui.multiFactorResolver) {
+    return <MultiFactorAuthAssertionScreen />;
+  }
+
+  return (
+    <div className="max-w-sm mx-auto pt-36 space-y-6 pb-36">
+      <div className="text-center space-y-4">
+        <img src="/firebase-logo-inverted.png" alt="Firebase UI" className="hidden dark:block h-36 mx-auto" />
+        <img src="/firebase-logo.png" alt="Firebase UI" className="block dark:hidden h-36 mx-auto" />
+        <p className="text-sm text-gray-700 dark:text-gray-300">
+          Welcome to Firebase UI, choose an example screen below to get started!
+        </p>
+      </div>
+      <div className="border border-neutral-200 dark:border-neutral-800 rounded divide-y divide-neutral-200 dark:divide-neutral-800 overflow-hidden">
+        {routes.map((route) => (
+          <Link
+            key={route.path}
+            href={route.path}
+            className="flex items-center justify-between hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 p-4"
+          >
+            <div className="space-y-1">
+              <h2 className="font-medium text-sm">{route.name}</h2>
+              <p className="text-xs text-gray-400 dark:text-gray-300">{route.description}</p>
+            </div>
+            <div className="text-neutral-600 dark:text-neutral-400">
+              <span className="text-xl">&rarr;</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/examples/nextjs-ssr/lib/components/pirate-toggle.tsx b/examples/nextjs-ssr/lib/components/pirate-toggle.tsx
new file mode 100644
index 000000000..d4b48e583
--- /dev/null
+++ b/examples/nextjs-ssr/lib/components/pirate-toggle.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+import { useUI } from "@invertase/firebaseui-react";
+import { enUs } from "@invertase/firebaseui-translations";
+import { pirate } from "../pirate";
+
+export function PirateToggle() {
+  const ui = useUI();
+  const isPirate = ui.locale.locale === "pirate";
+
+  return (
+    <button
+      className="fixed z-10 size-10 top-8 right-20 border border-gray-300 dark:border-gray-700 rounded-md p-2 group/toggle extend-touch-target"
+      onClick={() => {
+        if (isPirate) {
+          ui.setLocale(enUs);
+        } else {
+          ui.setLocale(pirate);
+        }
+      }}
+    >
+      {isPirate ? "🇺🇸" : "🏴‍☠️"}
+    </button>
+  );
+}
diff --git a/examples/nextjs-ssr/lib/components/theme-toggle.tsx b/examples/nextjs-ssr/lib/components/theme-toggle.tsx
new file mode 100644
index 000000000..86a33ac45
--- /dev/null
+++ b/examples/nextjs-ssr/lib/components/theme-toggle.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+export function ThemeToggle() {
+  return (
+    <button
+      className="fixed z-10 size-10 top-8 right-8 border border-gray-300 dark:border-gray-700 rounded-md p-2 group/toggle extend-touch-target"
+      onClick={() => {
+        document.documentElement.classList.toggle("dark", !document.documentElement.classList.contains("dark"));
+        localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+      }}
+      title="Toggle theme"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4.5"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+        <path d="M12 3l0 18" />
+        <path d="M12 9l4.65 -4.65" />
+        <path d="M12 14.3l7.37 -7.37" />
+        <path d="M12 19.6l8.85 -8.85" />
+      </svg>
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  );
+}
diff --git a/examples/nextjs-ssr/lib/pirate.ts b/examples/nextjs-ssr/lib/pirate.ts
new file mode 100644
index 000000000..aa92433ce
--- /dev/null
+++ b/examples/nextjs-ssr/lib/pirate.ts
@@ -0,0 +1,95 @@
+import { registerLocale } from "@invertase/firebaseui-translations";
+
+export const pirate = registerLocale("pirate", {
+  errors: {
+    userNotFound: "Arrr! No account found with this email address, matey",
+    wrongPassword: "Arrr! Incorrect password, ye scallywag",
+    invalidEmail: "Avast! Enter a valid email address, ye bilge rat",
+    userDisabled: "This account has been marooned, arrr!",
+    networkRequestFailed: "Can't connect to the server, ye land lubber! Check yer internet connection",
+    tooManyRequests: "Too many failed attempts, ye scurvy dog! Try again later",
+    missingVerificationCode: "Enter the verification code, ye scallywag",
+    emailAlreadyInUse: "An account already exists with this email, arrr!",
+    invalidCredential: "The credentials ye provided be invalid, matey",
+    weakPassword: "Ye password ain't long enough! It should be at least 8 characters",
+    unverifiedEmail: "Verify yer email address to continue, ye scallywag",
+    operationNotAllowed: "This operation ain't allowed, arrr! Contact support, matey",
+    invalidPhoneNumber: "The phone number be invalid, ye bilge rat",
+    missingPhoneNumber: "Provide a phone number, ye scallywag",
+    quotaExceeded: "SMS quota exceeded, arrr! Try again later, matey",
+    codeExpired: "The verification code has expired, ye scurvy dog",
+    captchaCheckFailed: "reCAPTCHA verification failed, arrr! Try again, matey",
+    missingVerificationId: "Complete the reCAPTCHA verification first, ye scallywag",
+    missingEmail: "Provide an email address, ye bilge rat",
+    invalidActionCode: "The password reset link be invalid or has expired, arrr!",
+    credentialAlreadyInUse: "An account already exists with this email, arrr! Sign in with that account, matey",
+    requiresRecentLogin: "This operation requires a recent login, ye scallywag! Sign in again",
+    providerAlreadyLinked: "This phone number be already linked to another account, arrr!",
+    invalidVerificationCode: "Invalid verification code, ye scurvy dog! Try again",
+    unknownError: "An unexpected error occurred, arrr!",
+    popupClosed: "The sign-in popup was closed, ye scallywag! Try again",
+    accountExistsWithDifferentCredential:
+      "An account already exists with this email, arrr! Sign in with the original provider, matey",
+    displayNameRequired: "Provide a display name, ye bilge rat",
+    secondFactorAlreadyInUse: "This phone number be already enrolled with this account, arrr!",
+  },
+  messages: {
+    passwordResetEmailSent: "Password reset email sent successfully, arrr!",
+    signInLinkSent: "Sign-in link sent successfully, matey!",
+    verificationCodeFirst: "Request a verification code first, ye scallywag",
+    checkEmailForReset: "Check yer email for password reset instructions, ye bilge rat",
+    dividerOr: "or",
+    termsAndPrivacy: "By continuing, ye agree to our {tos} and {privacy}, arrr!",
+    mfaSmsAssertionPrompt:
+      "A verification code will be sent to {phoneNumber} to complete the authentication process, matey.",
+  },
+  labels: {
+    emailAddress: "Email Address, ye bilge rat",
+    password: "Password, ye scallywag",
+    displayName: "Display Name, ye bilge rat",
+    forgotPassword: "Forgot Password, ye scallywag?",
+    signUp: "Sign Up, Matey",
+    signIn: "Sign In, Matey",
+    resetPassword: "Reset Password, ye scallywag",
+    createAccount: "Create Account, ye bilge rat",
+    backToSignIn: "Back to Sign In, ye scallywag",
+    signInWithPhone: "Sign in with Phone, ye scallywag",
+    phoneNumber: "Phone Number, ye bilge rat",
+    verificationCode: "Verification Code, ye scallywag",
+    sendCode: "Send Code, ye scallywag",
+    verifyCode: "Verify Code, ye scallywag",
+    signInWithGoogle: "Sign in with ye Google Account",
+    signInWithFacebook: "Sign in with ye Facebook Account",
+    signInWithApple: "Sign in with ye Apple Account",
+    signInWithMicrosoft: "Sign in with ye Microsoft Account",
+    signInWithGitHub: "Sign in with ye GitHub Account",
+    signInWithTwitter: "Sign in with ye X Account",
+    signInWithEmailLink: "Sign in with Email Link",
+    sendSignInLink: "Send Sign-in Link",
+    termsOfService: "Terms of Service",
+    privacyPolicy: "Privacy Policy",
+    resendCode: "Resend ye Code",
+    sending: "Firing...",
+    multiFactorEnrollment: "Multi-factor Enrrrrrrollment!",
+    multiFactorAssertion: "Multi-factor Authentication, arrr!",
+    mfaTotpVerification: "TOTP Verification, arrr!",
+    mfaSmsVerification: "SMS Verification, arrr!",
+    generateQrCode: "Generate ye QR Code",
+  },
+  prompts: {
+    noAccount: "Don't have an account, ye scallywag?",
+    haveAccount: "Already have an account, matey?",
+    enterEmailToReset: "Enter yer email address to reset yer password, ye bilge rat",
+    signInToAccount: "Sign in to yer account, matey",
+    smsVerificationPrompt: "Enter the verification code sent to yer phone number, ye scallywag",
+    enterDetailsToCreate: "Enter yer details to create a new account, ye bilge rat",
+    enterPhoneNumber: "Enter yer phone number, matey",
+    enterVerificationCode: "Enter the verification code, ye scallywag",
+    enterEmailForLink: "Enter yer email to receive a sign-in link, ye bilge rat",
+    mfaEnrollmentPrompt: "Select a new multi-factor enrollment method, arrr!",
+    mfaAssertionPrompt: "Complete the multi-factor authentication process, ye scallywag",
+    mfaAssertionFactorPrompt: "Choose a multi-factor authentication method, matey",
+    mfaTotpQrCodePrompt: "Scan this QR code with yer authenticator app, ye bilge rat",
+    mfaTotpEnrollmentVerificationPrompt: "Add the code generated by yer authenticator app, arrr!",
+  },
+});
diff --git a/examples/nextjs-ssr/lib/routes.ts b/examples/nextjs-ssr/lib/routes.ts
new file mode 100644
index 000000000..0e4fb01ca
--- /dev/null
+++ b/examples/nextjs-ssr/lib/routes.ts
@@ -0,0 +1,86 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const routes = [
+  {
+    name: "Sign In Screen",
+    description: "A sign in screen with email and password.",
+    path: "/screens/sign-in-auth-screen",
+  },
+  {
+    name: "Sign In Screen (with handlers)",
+    description: "A sign in screen with email and password, with forgot password and register handlers.",
+    path: "/screens/sign-in-auth-screen-w-handlers",
+  },
+  {
+    name: "Sign In Screen (with OAuth)",
+    description: "A sign in screen with email and password, with oAuth buttons.",
+    path: "/screens/sign-in-auth-screen-w-oauth",
+  },
+  {
+    name: "Sign Up Screen",
+    description: "A sign up screen with email and password.",
+    path: "/screens/sign-up-auth-screen",
+  },
+  {
+    name: "Sign Up Screen (with handlers)",
+    description: "A sign up screen with email and password, sign in handlers.",
+    path: "/screens/sign-up-auth-screen-w-handlers",
+  },
+  {
+    name: "Sign Up Screen (with OAuth)",
+    description: "A sign in screen with email and password, with oAuth buttons.",
+    path: "/screens/sign-up-auth-screen-w-oauth",
+  },
+  {
+    name: "Email Link Auth Screen",
+    description: "A screen allowing a user to send an email link for sign in.",
+    path: "/screens/email-link-auth-screen",
+  },
+  {
+    name: "Email Link Auth Screen (with OAuth)",
+    description: "A screen allowing a user to send an email link for sign in, with oAuth buttons.",
+    path: "/screens/email-link-auth-screen-w-oauth",
+  },
+  {
+    name: "Forgot Password Screen",
+    description: "A screen allowing a user to reset their password.",
+    path: "/screens/forgot-password-auth-screen",
+  },
+  {
+    name: "OAuth Screen",
+    description: "A screen which allows a user to sign in with OAuth only.",
+    path: "/screens/oauth-screen",
+  },
+  {
+    name: "Phone Auth Screen",
+    description: "A screen allowing a user to sign in with a phone number.",
+    path: "/screens/phone-auth-screen",
+  },
+  {
+    name: "Phone Auth Screen (with OAuth)",
+    description: "A screen allowing a user to sign in with a phone number, with oAuth buttons.",
+    path: "/screens/phone-auth-screen-w-oauth",
+  },
+] as const;
+
+export const hiddenRoutes = [
+  {
+    name: "MFA Enrollment Screen",
+    description: "A screen allowing a user to enroll in multi-factor authentication.",
+    path: "/screens/mfa-enrollment-screen",
+  },
+] as const;
diff --git a/examples/nextjs-ssr/package.json b/examples/nextjs-ssr/package.json
index e7ee1a21c..6fad1510d 100644
--- a/examples/nextjs-ssr/package.json
+++ b/examples/nextjs-ssr/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
diff --git a/examples/nextjs-ssr/public/firebase-logo-inverted.png b/examples/nextjs-ssr/public/firebase-logo-inverted.png
new file mode 100644
index 000000000..b6f4ef80a
Binary files /dev/null and b/examples/nextjs-ssr/public/firebase-logo-inverted.png differ
diff --git a/examples/nextjs-ssr/public/firebase-logo.png b/examples/nextjs-ssr/public/firebase-logo.png
new file mode 100644
index 000000000..1cf731440
Binary files /dev/null and b/examples/nextjs-ssr/public/firebase-logo.png differ
diff --git a/examples/nextjs/app/globals.css b/examples/nextjs/app/globals.css
index 7e62d3ba8..1fda7fe64 100644
--- a/examples/nextjs/app/globals.css
+++ b/examples/nextjs/app/globals.css
@@ -15,7 +15,25 @@
  */
 
 @import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
 @import "@invertase/firebaseui-styles/tailwind";
 
+/* Prevent flash by hiding content until theme is loaded */
+html:not(.theme-loaded) body {
+  visibility: hidden;
+}
+
+html.theme-loaded body {
+  visibility: visible;
+}
+
+.fui-provider__button[data-provider="oidc.line"][data-themed="true"] {
+  --line-primary: #07B53B;
+  --color-primary: var(--line-primary);
+  --color-primary-hover: --alpha(var(--line-primary) / 85%);
+  --color-primary-surface: #FFFFFF;
+  --color-border: var(--line-primary);
+}
+
 /* @import "@invertase/firebaseui-styles/themes/dark.css"; */
 /* @import "@invertase/firebaseui-styles/themes/brutalist.css"; */
diff --git a/examples/nextjs/app/layout.tsx b/examples/nextjs/app/layout.tsx
index 9c7acf604..6fb5a1dc5 100644
--- a/examples/nextjs/app/layout.tsx
+++ b/examples/nextjs/app/layout.tsx
@@ -14,24 +14,13 @@
  * limitations under the License.
  */
 
-// import { getCurrentUser } from "@/lib/firebase/serverApp";
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import Script from "next/script";
 import { FirebaseUIProviderHoc } from "../lib/firebase/ui";
-// import { Header } from "@/lib/components/header";
+import { ThemeToggle } from "../lib/components/theme-toggle";
+import { PirateToggle } from "../lib/components/pirate-toggle";
 
 import "./globals.css";
-// import { useUser } from "@/lib/firebase/hooks";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -43,13 +32,36 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  // const user = await useUser();
-
   return (
-    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        {/* <Header currentUser={{null}} /> */}
-        <FirebaseUIProviderHoc>{children}</FirebaseUIProviderHoc>
+    <html lang="en" suppressHydrationWarning>
+      <body className="dark:bg-neutral-900 dark:text-white" suppressHydrationWarning>
+        <Script
+          id="dark-mode-init"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+              !(function() {
+                try {
+                  var theme = localStorage.getItem('theme');
+                  var isDark = theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches);
+                  if (isDark) {
+                    document.documentElement.classList.add('dark');
+                  }
+                  // Mark theme as loaded - this removes the visibility:hidden
+                  document.documentElement.classList.add('theme-loaded');
+                } catch (e) {
+                  // If anything fails, still show content
+                  document.documentElement.classList.add('theme-loaded');
+                }
+              })();
+            `,
+          }}
+        />
+        <FirebaseUIProviderHoc>
+          <ThemeToggle />
+          <PirateToggle />
+          {children}
+        </FirebaseUIProviderHoc>
       </body>
     </html>
   );
diff --git a/examples/nextjs/app/page.tsx b/examples/nextjs/app/page.tsx
index 3e60dfe04..69ede49ac 100644
--- a/examples/nextjs/app/page.tsx
+++ b/examples/nextjs/app/page.tsx
@@ -16,75 +16,122 @@
 
 "use client";
 
+import { MultiFactorAuthAssertionScreen, useUI } from "@invertase/firebaseui-react";
+import { multiFactor, sendEmailVerification, signOut } from "firebase/auth";
+import { useRouter } from "next/navigation";
 import { useUser } from "@/lib/firebase/hooks";
+import { auth } from "@/lib/firebase/clientApp";
+import { routes } from "@/lib/routes";
 import Link from "next/link";
 
 export default function Home() {
   const user = useUser();
+  const ui = useUI();
+  const router = useRouter();
+
+  if (user) {
+    return <AuthenticatedApp user={user} router={router} />;
+  }
+
+  return <UnauthenticatedApp ui={ui} />;
+}
+
+function UnauthenticatedApp({ ui }: { ui: ReturnType<typeof useUI> }) {
+  // This can trigger if the user is not on a screen already, and gets an MFA challenge - e.g. on One-Tap sign in.
+  if (ui.multiFactorResolver) {
+    return <MultiFactorAuthAssertionScreen />;
+  }
 
   return (
-    <div className="p-8 ">
-      <h1 className="text-3xl font-bold mb-6">Firebase UI Demo</h1>
-      <div className="mb-6">{user && <div>Welcome: {user.email || user.phoneNumber}</div>}</div>
-      <div>
-        <h2 className="text-2xl font-bold mb-4">Auth Screens</h2>
-        <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-          <li>
-            <Link href="/screens/sign-in-auth-screen" className="text-blue-500 hover:underline">
-              Sign In Auth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/sign-in-auth-screen-w-handlers" className="text-blue-500 hover:underline">
-              Sign In Auth Screen with Handlers
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/sign-in-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Sign In Auth Screen with OAuth
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/email-link-auth-screen" className="text-blue-500 hover:underline">
-              Email Link Auth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/email-link-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Email Link Auth Screen with OAuth
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/phone-auth-screen" className="text-blue-500 hover:underline">
-              Phone Auth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/phone-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Phone Auth Screen with OAuth
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/sign-up-auth-screen" className="text-blue-500 hover:underline">
-              Sign Up Auth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/sign-up-auth-screen-w-oauth" className="text-blue-500 hover:underline">
-              Sign Up Auth Screen with OAuth
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/oauth-screen" className="text-blue-500 hover:underline">
-              OAuth Screen
-            </Link>
-          </li>
-          <li>
-            <Link href="/screens/password-reset-screen" className="text-blue-500 hover:underline">
-              Password Reset Screen
-            </Link>
-          </li>
-        </ul>
+    <div className="max-w-sm mx-auto pt-36 space-y-6 pb-36">
+      <div className="text-center space-y-4">
+        <img src="/firebase-logo-inverted.png" alt="Firebase UI" className="hidden dark:block h-36 mx-auto" />
+        <img src="/firebase-logo.png" alt="Firebase UI" className="block dark:hidden h-36 mx-auto" />
+        <p className="text-sm text-gray-700 dark:text-gray-300">
+          Welcome to Firebase UI, choose an example screen below to get started!
+        </p>
+      </div>
+      <div className="border border-neutral-200 dark:border-neutral-800 rounded divide-y divide-neutral-200 dark:divide-neutral-800 overflow-hidden">
+        {routes.map((route) => (
+          <Link
+            key={route.path}
+            href={route.path}
+            className="flex items-center justify-between hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 p-4"
+          >
+            <div className="space-y-1">
+              <h2 className="font-medium text-sm">{route.name}</h2>
+              <p className="text-xs text-gray-400 dark:text-gray-300">{route.description}</p>
+            </div>
+            <div className="text-neutral-600 dark:text-neutral-400">
+              <span className="text-xl">&rarr;</span>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function AuthenticatedApp({
+  user,
+  router,
+}: {
+  user: NonNullable<ReturnType<typeof useUser>>;
+  router: ReturnType<typeof useRouter>;
+}) {
+  const mfa = multiFactor(user);
+
+  return (
+    <div className="max-w-sm mx-auto pt-36 space-y-6 pb-36">
+      <div className="border border-neutral-200 dark:border-neutral-800 rounded-md p-4 space-y-4">
+        <h1 className="text-md font-medium">Welcome, {user.displayName || user.email || user.phoneNumber}</h1>
+        {user.email ? (
+          <>
+            {user.emailVerified ? (
+              <div className="text-green-500">Email verified</div>
+            ) : (
+              <button
+                className="bg-red-500 text-white px-3 py-1.5 rounded text-sm"
+                onClick={async () => {
+                  try {
+                    await sendEmailVerification(user);
+                    alert("Email verification sent, please check your email");
+                  } catch (error) {
+                    console.error(error);
+                    alert("Error sending email verification, check console");
+                  }
+                }}
+              >
+                Verify Email &rarr;
+              </button>
+            )}
+          </>
+        ) : null}
+
+        <hr className="opacity-30" />
+        <h2 className="text-sm font-medium">Multi-factor Authentication</h2>
+        {mfa.enrolledFactors.map((factor) => {
+          return (
+            <div key={factor.factorId}>
+              {factor.factorId} - {factor.displayName}
+            </div>
+          );
+        })}
+        <button
+          className="bg-blue-500 text-white px-3 py-1.5 rounded text-sm"
+          onClick={() => {
+            router.push("/screens/mfa-enrollment-screen");
+          }}
+        >
+          Add MFA Factor &rarr;
+        </button>
+        <hr className="opacity-30" />
+        <button
+          className="bg-blue-500 text-white px-3 py-1.5 rounded text-sm"
+          onClick={async () => await signOut(auth)}
+        >
+          Sign Out &rarr;
+        </button>
       </div>
     </div>
   );
diff --git a/examples/nextjs/app/screens/email-link-auth-screen-w-oauth/page.tsx b/examples/nextjs/app/screens/email-link-auth-screen-w-oauth/page.tsx
index 2886c4113..97cb74e0d 100644
--- a/examples/nextjs/app/screens/email-link-auth-screen-w-oauth/page.tsx
+++ b/examples/nextjs/app/screens/email-link-auth-screen-w-oauth/page.tsx
@@ -16,12 +16,59 @@
 
 "use client";
 
-import { EmailLinkAuthScreen, GoogleSignInButton } from "@invertase/firebaseui-react";
+import {
+  AppleSignInButton,
+  EmailLinkAuthScreen,
+  FacebookSignInButton,
+  GitHubSignInButton,
+  GoogleSignInButton,
+  MicrosoftSignInButton,
+  TwitterSignInButton,
+  OAuthButton,
+} from "@invertase/firebaseui-react";
+import { OAuthProvider } from "firebase/auth";
+import { useRouter } from "next/navigation";
 
 export default function EmailLinkAuthScreenWithOAuthPage() {
+  const router = useRouter();
+
   return (
-    <EmailLinkAuthScreen>
+    <EmailLinkAuthScreen
+      onEmailSent={() => {
+        alert("Email has been sent - please check your email");
+      }}
+      onSignIn={(credential) => {
+        console.log(credential);
+        router.push("/");
+      }}
+    >
       <GoogleSignInButton />
+      <FacebookSignInButton />
+      <AppleSignInButton />
+      <GitHubSignInButton />
+      <MicrosoftSignInButton />
+      <TwitterSignInButton />
+      <LineSignInButton />
     </EmailLinkAuthScreen>
   );
 }
+
+function LineSignInButton() {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}
diff --git a/examples/nextjs/app/screens/layout.tsx b/examples/nextjs/app/screens/layout.tsx
new file mode 100644
index 000000000..392b2d1fb
--- /dev/null
+++ b/examples/nextjs/app/screens/layout.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Link from "next/link";
+
+export default function ScreensLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="p-8">
+      <Link
+        href="/"
+        className="border border-gray-300 dark:border-gray-700 border-rounded px-4 py-2 rounded-md text-sm inline-block"
+      >
+        &larr; Back to overview
+      </Link>
+      <div className="pt-12">{children}</div>
+    </div>
+  );
+}
diff --git a/examples/nextjs/app/screens/oauth-screen/page.tsx b/examples/nextjs/app/screens/oauth-screen/page.tsx
index 46872be1e..04049a4f5 100644
--- a/examples/nextjs/app/screens/oauth-screen/page.tsx
+++ b/examples/nextjs/app/screens/oauth-screen/page.tsx
@@ -16,12 +16,57 @@
 
 "use client";
 
-import { GoogleSignInButton, OAuthScreen } from "@invertase/firebaseui-react";
+import { useState } from "react";
+import { OAuthProvider } from "firebase/auth";
+import {
+  OAuthButton,
+  FacebookSignInButton,
+  AppleSignInButton,
+  GitHubSignInButton,
+  GoogleSignInButton,
+  MicrosoftSignInButton,
+  OAuthScreen,
+  TwitterSignInButton,
+} from "@invertase/firebaseui-react";
 
 export default function OAuthScreenPage() {
+  const [themed, setThemed] = useState(false);
+
+  return (
+    <>
+      <OAuthScreen>
+        <GoogleSignInButton themed={themed ? "neutral" : undefined} />
+        <FacebookSignInButton themed={themed} />
+        <AppleSignInButton themed={themed} />
+        <GitHubSignInButton themed={themed} />
+        <MicrosoftSignInButton themed={themed} />
+        <TwitterSignInButton themed={themed} />
+        <LineSignInButton themed={themed} />
+      </OAuthScreen>
+      <div className="flex items-center gap-2 max-w-sm mx-auto mt-12">
+        <input type="checkbox" checked={themed} onChange={() => setThemed(!themed)} />
+        <label htmlFor="remember-me">Themed buttons</label>
+      </div>
+    </>
+  );
+}
+
+function LineSignInButton({ themed }: { themed?: boolean | string }) {
+  const provider = new OAuthProvider("oidc.line");
+
   return (
-    <OAuthScreen>
-      <GoogleSignInButton />
-    </OAuthScreen>
+    <OAuthButton provider={provider} themed={themed}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
   );
 }
diff --git a/examples/nextjs/app/screens/phone-auth-screen-w-oauth/page.tsx b/examples/nextjs/app/screens/phone-auth-screen-w-oauth/page.tsx
index abb815b59..5a0f3ff6a 100644
--- a/examples/nextjs/app/screens/phone-auth-screen-w-oauth/page.tsx
+++ b/examples/nextjs/app/screens/phone-auth-screen-w-oauth/page.tsx
@@ -16,12 +16,56 @@
 
 "use client";
 
-import { GoogleSignInButton, PhoneAuthScreen } from "@invertase/firebaseui-react";
+import {
+  FacebookSignInButton,
+  GitHubSignInButton,
+  AppleSignInButton,
+  GoogleSignInButton,
+  PhoneAuthScreen,
+  TwitterSignInButton,
+  MicrosoftSignInButton,
+  OAuthButton,
+} from "@invertase/firebaseui-react";
+import { OAuthProvider } from "firebase/auth";
+import { useRouter } from "next/navigation";
 
 export default function PhoneAuthScreenWithOAuthPage() {
+  const router = useRouter();
+
   return (
-    <PhoneAuthScreen>
+    <PhoneAuthScreen
+      onSignIn={(credential) => {
+        console.log(credential);
+        router.push("/");
+      }}
+    >
       <GoogleSignInButton />
+      <FacebookSignInButton />
+      <AppleSignInButton />
+      <GitHubSignInButton />
+      <MicrosoftSignInButton />
+      <TwitterSignInButton />
+      <LineSignInButton />
     </PhoneAuthScreen>
   );
 }
+
+function LineSignInButton() {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}
diff --git a/examples/nextjs/app/screens/sign-in-auth-screen-w-oauth/page.tsx b/examples/nextjs/app/screens/sign-in-auth-screen-w-oauth/page.tsx
index 4789f1f98..94f26ce41 100644
--- a/examples/nextjs/app/screens/sign-in-auth-screen-w-oauth/page.tsx
+++ b/examples/nextjs/app/screens/sign-in-auth-screen-w-oauth/page.tsx
@@ -16,7 +16,17 @@
 
 "use client";
 
-import { GoogleSignInButton, SignInAuthScreen } from "@invertase/firebaseui-react";
+import {
+  AppleSignInButton,
+  GoogleSignInButton,
+  SignInAuthScreen,
+  FacebookSignInButton,
+  GitHubSignInButton,
+  MicrosoftSignInButton,
+  TwitterSignInButton,
+  OAuthButton,
+} from "@invertase/firebaseui-react";
+import { OAuthProvider } from "firebase/auth";
 import { useRouter } from "next/navigation";
 
 export default function SignInAuthScreenWithOAuthPage() {
@@ -24,12 +34,40 @@ export default function SignInAuthScreenWithOAuthPage() {
 
   return (
     <SignInAuthScreen
-      onForgotPasswordClick={() => router.push("/password-reset-screen")}
-      onSignIn={() => {
+      onSignIn={(credential) => {
+        console.log(credential);
         router.push("/");
       }}
     >
-      <GoogleSignInButton />
+      <div className="space-y-2">
+        <GoogleSignInButton />
+        <FacebookSignInButton />
+        <AppleSignInButton />
+        <GitHubSignInButton />
+        <MicrosoftSignInButton />
+        <TwitterSignInButton />
+        <LineSignInButton />
+      </div>
     </SignInAuthScreen>
   );
 }
+
+function LineSignInButton() {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}
diff --git a/examples/nextjs/app/screens/sign-up-auth-screen-w-handlers/page.tsx b/examples/nextjs/app/screens/sign-up-auth-screen-w-handlers/page.tsx
new file mode 100644
index 000000000..eed16bfc9
--- /dev/null
+++ b/examples/nextjs/app/screens/sign-up-auth-screen-w-handlers/page.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+import { SignUpAuthScreen } from "@invertase/firebaseui-react";
+import { useRouter } from "next/navigation";
+
+export default function SignUpAuthScreenWithHandlersPage() {
+  const router = useRouter();
+
+  return (
+    <SignUpAuthScreen
+      onSignInClick={() => {
+        router.push("/screens/sign-in-auth-screen");
+      }}
+      onSignUp={(credential) => {
+        console.log(credential);
+        router.push("/");
+      }}
+    />
+  );
+}
diff --git a/examples/nextjs/app/screens/sign-up-auth-screen-w-oauth/page.tsx b/examples/nextjs/app/screens/sign-up-auth-screen-w-oauth/page.tsx
index 4c649f2e9..6c8c28749 100644
--- a/examples/nextjs/app/screens/sign-up-auth-screen-w-oauth/page.tsx
+++ b/examples/nextjs/app/screens/sign-up-auth-screen-w-oauth/page.tsx
@@ -16,12 +16,56 @@
 
 "use client";
 
-import { GoogleSignInButton, SignUpAuthScreen } from "@invertase/firebaseui-react";
+import {
+  FacebookSignInButton,
+  GitHubSignInButton,
+  AppleSignInButton,
+  GoogleSignInButton,
+  SignUpAuthScreen,
+  TwitterSignInButton,
+  MicrosoftSignInButton,
+  OAuthButton,
+} from "@invertase/firebaseui-react";
+import { OAuthProvider } from "firebase/auth";
+import { useRouter } from "next/navigation";
 
 export default function SignUpAuthScreenWithOAuthPage() {
+  const router = useRouter();
+
   return (
-    <SignUpAuthScreen>
+    <SignUpAuthScreen
+      onSignUp={(credential) => {
+        console.log(credential);
+        router.push("/");
+      }}
+    >
       <GoogleSignInButton />
+      <FacebookSignInButton />
+      <AppleSignInButton />
+      <GitHubSignInButton />
+      <MicrosoftSignInButton />
+      <TwitterSignInButton />
+      <LineSignInButton />
     </SignUpAuthScreen>
   );
 }
+
+function LineSignInButton() {
+  const provider = new OAuthProvider("oidc.line");
+
+  return (
+    <OAuthButton provider={provider}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
+        <path
+          fill="#00c300"
+          d="M12.5 42h23a6.5 6.5 0 0 0 6.5-6.5v-23A6.5 6.5 0 0 0 35.5 6h-23A6.5 6.5 0 0 0 6 12.5v23a6.5 6.5 0 0 0 6.5 6.5"
+        />
+        <path
+          fill="#fff"
+          d="M37.113 22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108 4.772-13.108 10.637c0 5.258 4.663 9.662 10.962 10.495.427.092 1.008.282 1.155.646.132.331.086.85.042 1.185 0 0-.153.925-.187 1.122-.057.331-.263 1.296 1.135.707s7.548-4.445 10.298-7.611h-.001c1.901-2.082 2.811-4.197 2.811-6.544m-18.238 3.49h-2.604a.69.69 0 0 1-.687-.688V20.01a.688.688 0 0 1 1.374 0v4.521h1.917a.688.688 0 0 1 0 1.376m2.693-.688a.688.688 0 1 1-1.374 0V20.01a.688.688 0 0 1 1.374 0zm6.27 0a.684.684 0 0 1-.688.688.69.69 0 0 1-.549-.275l-2.669-3.635v3.222a.689.689 0 0 1-1.376 0V20.01a.687.687 0 0 1 1.237-.412l2.67 3.635V20.01a.688.688 0 0 1 1.375 0zm4.214-3.292a.689.689 0 0 1 0 1.375h-1.917v1.23h1.917a.688.688 0 0 1 0 1.375h-2.604a.69.69 0 0 1-.687-.688v-5.208c0-.379.308-.687.687-.687h2.604a.688.688 0 1 1 0 1.374h-1.917v1.23h1.917z"
+        />
+      </svg>
+      <span>Sign in with Line</span>
+    </OAuthButton>
+  );
+}
diff --git a/examples/nextjs/lib/components/pirate-toggle.tsx b/examples/nextjs/lib/components/pirate-toggle.tsx
new file mode 100644
index 000000000..d4b48e583
--- /dev/null
+++ b/examples/nextjs/lib/components/pirate-toggle.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+import { useUI } from "@invertase/firebaseui-react";
+import { enUs } from "@invertase/firebaseui-translations";
+import { pirate } from "../pirate";
+
+export function PirateToggle() {
+  const ui = useUI();
+  const isPirate = ui.locale.locale === "pirate";
+
+  return (
+    <button
+      className="fixed z-10 size-10 top-8 right-20 border border-gray-300 dark:border-gray-700 rounded-md p-2 group/toggle extend-touch-target"
+      onClick={() => {
+        if (isPirate) {
+          ui.setLocale(enUs);
+        } else {
+          ui.setLocale(pirate);
+        }
+      }}
+    >
+      {isPirate ? "🇺🇸" : "🏴‍☠️"}
+    </button>
+  );
+}
diff --git a/examples/nextjs/lib/components/theme-toggle.tsx b/examples/nextjs/lib/components/theme-toggle.tsx
new file mode 100644
index 000000000..86a33ac45
--- /dev/null
+++ b/examples/nextjs/lib/components/theme-toggle.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+export function ThemeToggle() {
+  return (
+    <button
+      className="fixed z-10 size-10 top-8 right-8 border border-gray-300 dark:border-gray-700 rounded-md p-2 group/toggle extend-touch-target"
+      onClick={() => {
+        document.documentElement.classList.toggle("dark", !document.documentElement.classList.contains("dark"));
+        localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+      }}
+      title="Toggle theme"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4.5"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+        <path d="M12 3l0 18" />
+        <path d="M12 9l4.65 -4.65" />
+        <path d="M12 14.3l7.37 -7.37" />
+        <path d="M12 19.6l8.85 -8.85" />
+      </svg>
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  );
+}
diff --git a/examples/nextjs/lib/pirate.ts b/examples/nextjs/lib/pirate.ts
new file mode 100644
index 000000000..aa92433ce
--- /dev/null
+++ b/examples/nextjs/lib/pirate.ts
@@ -0,0 +1,95 @@
+import { registerLocale } from "@invertase/firebaseui-translations";
+
+export const pirate = registerLocale("pirate", {
+  errors: {
+    userNotFound: "Arrr! No account found with this email address, matey",
+    wrongPassword: "Arrr! Incorrect password, ye scallywag",
+    invalidEmail: "Avast! Enter a valid email address, ye bilge rat",
+    userDisabled: "This account has been marooned, arrr!",
+    networkRequestFailed: "Can't connect to the server, ye land lubber! Check yer internet connection",
+    tooManyRequests: "Too many failed attempts, ye scurvy dog! Try again later",
+    missingVerificationCode: "Enter the verification code, ye scallywag",
+    emailAlreadyInUse: "An account already exists with this email, arrr!",
+    invalidCredential: "The credentials ye provided be invalid, matey",
+    weakPassword: "Ye password ain't long enough! It should be at least 8 characters",
+    unverifiedEmail: "Verify yer email address to continue, ye scallywag",
+    operationNotAllowed: "This operation ain't allowed, arrr! Contact support, matey",
+    invalidPhoneNumber: "The phone number be invalid, ye bilge rat",
+    missingPhoneNumber: "Provide a phone number, ye scallywag",
+    quotaExceeded: "SMS quota exceeded, arrr! Try again later, matey",
+    codeExpired: "The verification code has expired, ye scurvy dog",
+    captchaCheckFailed: "reCAPTCHA verification failed, arrr! Try again, matey",
+    missingVerificationId: "Complete the reCAPTCHA verification first, ye scallywag",
+    missingEmail: "Provide an email address, ye bilge rat",
+    invalidActionCode: "The password reset link be invalid or has expired, arrr!",
+    credentialAlreadyInUse: "An account already exists with this email, arrr! Sign in with that account, matey",
+    requiresRecentLogin: "This operation requires a recent login, ye scallywag! Sign in again",
+    providerAlreadyLinked: "This phone number be already linked to another account, arrr!",
+    invalidVerificationCode: "Invalid verification code, ye scurvy dog! Try again",
+    unknownError: "An unexpected error occurred, arrr!",
+    popupClosed: "The sign-in popup was closed, ye scallywag! Try again",
+    accountExistsWithDifferentCredential:
+      "An account already exists with this email, arrr! Sign in with the original provider, matey",
+    displayNameRequired: "Provide a display name, ye bilge rat",
+    secondFactorAlreadyInUse: "This phone number be already enrolled with this account, arrr!",
+  },
+  messages: {
+    passwordResetEmailSent: "Password reset email sent successfully, arrr!",
+    signInLinkSent: "Sign-in link sent successfully, matey!",
+    verificationCodeFirst: "Request a verification code first, ye scallywag",
+    checkEmailForReset: "Check yer email for password reset instructions, ye bilge rat",
+    dividerOr: "or",
+    termsAndPrivacy: "By continuing, ye agree to our {tos} and {privacy}, arrr!",
+    mfaSmsAssertionPrompt:
+      "A verification code will be sent to {phoneNumber} to complete the authentication process, matey.",
+  },
+  labels: {
+    emailAddress: "Email Address, ye bilge rat",
+    password: "Password, ye scallywag",
+    displayName: "Display Name, ye bilge rat",
+    forgotPassword: "Forgot Password, ye scallywag?",
+    signUp: "Sign Up, Matey",
+    signIn: "Sign In, Matey",
+    resetPassword: "Reset Password, ye scallywag",
+    createAccount: "Create Account, ye bilge rat",
+    backToSignIn: "Back to Sign In, ye scallywag",
+    signInWithPhone: "Sign in with Phone, ye scallywag",
+    phoneNumber: "Phone Number, ye bilge rat",
+    verificationCode: "Verification Code, ye scallywag",
+    sendCode: "Send Code, ye scallywag",
+    verifyCode: "Verify Code, ye scallywag",
+    signInWithGoogle: "Sign in with ye Google Account",
+    signInWithFacebook: "Sign in with ye Facebook Account",
+    signInWithApple: "Sign in with ye Apple Account",
+    signInWithMicrosoft: "Sign in with ye Microsoft Account",
+    signInWithGitHub: "Sign in with ye GitHub Account",
+    signInWithTwitter: "Sign in with ye X Account",
+    signInWithEmailLink: "Sign in with Email Link",
+    sendSignInLink: "Send Sign-in Link",
+    termsOfService: "Terms of Service",
+    privacyPolicy: "Privacy Policy",
+    resendCode: "Resend ye Code",
+    sending: "Firing...",
+    multiFactorEnrollment: "Multi-factor Enrrrrrrollment!",
+    multiFactorAssertion: "Multi-factor Authentication, arrr!",
+    mfaTotpVerification: "TOTP Verification, arrr!",
+    mfaSmsVerification: "SMS Verification, arrr!",
+    generateQrCode: "Generate ye QR Code",
+  },
+  prompts: {
+    noAccount: "Don't have an account, ye scallywag?",
+    haveAccount: "Already have an account, matey?",
+    enterEmailToReset: "Enter yer email address to reset yer password, ye bilge rat",
+    signInToAccount: "Sign in to yer account, matey",
+    smsVerificationPrompt: "Enter the verification code sent to yer phone number, ye scallywag",
+    enterDetailsToCreate: "Enter yer details to create a new account, ye bilge rat",
+    enterPhoneNumber: "Enter yer phone number, matey",
+    enterVerificationCode: "Enter the verification code, ye scallywag",
+    enterEmailForLink: "Enter yer email to receive a sign-in link, ye bilge rat",
+    mfaEnrollmentPrompt: "Select a new multi-factor enrollment method, arrr!",
+    mfaAssertionPrompt: "Complete the multi-factor authentication process, ye scallywag",
+    mfaAssertionFactorPrompt: "Choose a multi-factor authentication method, matey",
+    mfaTotpQrCodePrompt: "Scan this QR code with yer authenticator app, ye bilge rat",
+    mfaTotpEnrollmentVerificationPrompt: "Add the code generated by yer authenticator app, arrr!",
+  },
+});
diff --git a/examples/nextjs/lib/routes.ts b/examples/nextjs/lib/routes.ts
new file mode 100644
index 000000000..0e4fb01ca
--- /dev/null
+++ b/examples/nextjs/lib/routes.ts
@@ -0,0 +1,86 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const routes = [
+  {
+    name: "Sign In Screen",
+    description: "A sign in screen with email and password.",
+    path: "/screens/sign-in-auth-screen",
+  },
+  {
+    name: "Sign In Screen (with handlers)",
+    description: "A sign in screen with email and password, with forgot password and register handlers.",
+    path: "/screens/sign-in-auth-screen-w-handlers",
+  },
+  {
+    name: "Sign In Screen (with OAuth)",
+    description: "A sign in screen with email and password, with oAuth buttons.",
+    path: "/screens/sign-in-auth-screen-w-oauth",
+  },
+  {
+    name: "Sign Up Screen",
+    description: "A sign up screen with email and password.",
+    path: "/screens/sign-up-auth-screen",
+  },
+  {
+    name: "Sign Up Screen (with handlers)",
+    description: "A sign up screen with email and password, sign in handlers.",
+    path: "/screens/sign-up-auth-screen-w-handlers",
+  },
+  {
+    name: "Sign Up Screen (with OAuth)",
+    description: "A sign in screen with email and password, with oAuth buttons.",
+    path: "/screens/sign-up-auth-screen-w-oauth",
+  },
+  {
+    name: "Email Link Auth Screen",
+    description: "A screen allowing a user to send an email link for sign in.",
+    path: "/screens/email-link-auth-screen",
+  },
+  {
+    name: "Email Link Auth Screen (with OAuth)",
+    description: "A screen allowing a user to send an email link for sign in, with oAuth buttons.",
+    path: "/screens/email-link-auth-screen-w-oauth",
+  },
+  {
+    name: "Forgot Password Screen",
+    description: "A screen allowing a user to reset their password.",
+    path: "/screens/forgot-password-auth-screen",
+  },
+  {
+    name: "OAuth Screen",
+    description: "A screen which allows a user to sign in with OAuth only.",
+    path: "/screens/oauth-screen",
+  },
+  {
+    name: "Phone Auth Screen",
+    description: "A screen allowing a user to sign in with a phone number.",
+    path: "/screens/phone-auth-screen",
+  },
+  {
+    name: "Phone Auth Screen (with OAuth)",
+    description: "A screen allowing a user to sign in with a phone number, with oAuth buttons.",
+    path: "/screens/phone-auth-screen-w-oauth",
+  },
+] as const;
+
+export const hiddenRoutes = [
+  {
+    name: "MFA Enrollment Screen",
+    description: "A screen allowing a user to enroll in multi-factor authentication.",
+    path: "/screens/mfa-enrollment-screen",
+  },
+] as const;
diff --git a/examples/nextjs/public/firebase-logo-inverted.png b/examples/nextjs/public/firebase-logo-inverted.png
new file mode 100644
index 000000000..b6f4ef80a
Binary files /dev/null and b/examples/nextjs/public/firebase-logo-inverted.png differ
diff --git a/examples/nextjs/public/firebase-logo.png b/examples/nextjs/public/firebase-logo.png
new file mode 100644
index 000000000..1cf731440
Binary files /dev/null and b/examples/nextjs/public/firebase-logo.png differ
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 1bb61b362..b94190c11 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -27,6 +27,6 @@ export * from "./register-framework";
 export * from "./schemas";
 export * from "./translations";
 
-if (import.meta.env.PROD) {
+if (import.meta.env?.PROD) {
   registerFramework("core", pkgJson.version);
 }
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index b79e63a60..b0d565497 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -24,6 +24,6 @@ export { PolicyContext } from "./components/policies";
 export { FirebaseUIProvider, type FirebaseUIProviderProps } from "./context";
 export * from "./hooks";
 
-if (import.meta.env.PROD) {
+if (import.meta.env?.PROD) {
   registerFramework("react", pkgJson.version);
 }