chore(*): upgraded react example app to the latest packages

chore(*): upgraded react example app to the latest packages

Author: dackers86

examples/nextjs-ssr/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["next/core-web-vitals"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "no-console": "off"
+  }
+}

examples/nextjs-ssr/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "fir-ui-rework"
+  }
+}

examples/nextjs-ssr/.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# firebase
+.firebase
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-ssr/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "endOfLine": "auto"
+}

examples/nextjs-ssr/README.md

@@ -0,0 +1,54 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app) configured for **Server-Side Rendering (SSR)**.
+
+This example demonstrates how to use Firebase UI with Next.js App Router using server-side rendering. Unlike the static export version (`nextjs`), this version uses Next.js SSR capabilities including:
+
+- Server Components for initial page rendering
+- Server-side authentication state checking using `getCurrentUser()` from `serverApp.ts`
+- Server-side redirects using `redirect()` from `next/navigation`
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Differences from Static Export Version
+
+- **No `output: "export"`** in `next.config.ts` - enables SSR
+- **Server Components** - Pages use `async` functions and `getCurrentUser()` from `serverApp.ts`
+- **Server-side redirects** - Uses `redirect()` instead of client-side `useRouter().push()`
+- **Server-side auth checks** - Authentication state is checked on the server before rendering
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Next.js Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components) - learn about server-side rendering
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy
+
+This app can be deployed to Firebase Hosting or any Node.js hosting platform that supports Next.js SSR:
+
+```bash
+pnpm run deploy
+```
+
+For Firebase Hosting, ensure you have configured the hosting site `fir-ui-2025-nextjs-ssr` in your Firebase project.

examples/nextjs-ssr/app/favicon.ico

@@ -0,0 +1,29 @@
+/**
+ * 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 { getCurrentUser } from "@/lib/firebase/serverApp";
+import { redirect } from "next/navigation";
+import ForgotPasswordScreen from "./screen";
+
+export default async function ForgotPasswordPage() {
+  const { currentUser } = await getCurrentUser();
+
+  if (currentUser) {
+    redirect("/");
+  }
+
+  return <ForgotPasswordScreen />;
+}

examples/nextjs-ssr/app/forgot-password/page.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 { ForgotPasswordAuthScreen } from "@invertase/firebaseui-react";
+import { useRouter } from "next/navigation";
+
+export default function Screen() {
+  const router = useRouter();
+
+  return <ForgotPasswordAuthScreen onBackToSignInClick={() => router.push("/sign-in")} />;
+}

examples/nextjs-ssr/app/forgot-password/screen.tsx

@@ -0,0 +1,21 @@
+/**
+ * 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 "tailwindcss";
+@import "@invertase/firebaseui-styles/tailwind";
+
+/* @import "@invertase/firebaseui-styles/themes/dark.css"; */
+/* @import "@invertase/firebaseui-styles/themes/brutalist.css"; */

examples/nextjs-ssr/app/globals.css

@@ -0,0 +1,55 @@
+/**
+ * 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 { 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 { FirebaseUIProviderHoc } from "@/lib/firebase/ui";
+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",
+};
+
+export default async function RootLayout({
+  children,
+}: 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>
+      </body>
+    </html>
+  );
+}