Please update the name of this repo!! #225

downright-development · 2025-02-28T21:08:30Z

I've been searching for a nice firebase starter either nextjs or tanstack start.

I avoided this repo out the rip because it said nextjs-13.

Finally took a look at the package json, had no clue you were running next 15, react 19, AND tailwind v4. I woulda jumped at this in a moment had the repo name been more accurate :P

Maybe just change it to "NextJS-Firebase-Starter" and in the README identify the current versions?

milliorn · 2025-03-01T06:51:15Z

@downright-development

I avoided this repo out the rip because it said nextjs-13.

I recently updated this repo. I did forget to update the repo name.

Finally took a look at the package json, had no clue you were running next 15, react 19, AND tailwind v4. I woulda jumped at this in a moment had the repo name been more accurate :P

Maybe just change it to "NextJS-Firebase-Starter" and in the README identify the current versions?

The reason I updated to NextJS 15, was due to an error in my workflow. It pushed through. I have not checked to see if this is properly working. I suspect it is not. I am working on getting to this. I will also update the readme when I do so.

Thanks for checking out the repo and for the feedback! I totally get your point—seeing "NextJS-13" in the name could be misleading, especially since the project is actually running Next.js 15, React 19, and Tailwind CSS 4.

I'll update the repo name to something more accurate, and make sure the README clearly lists the current framework versions.

Appreciate you taking the time to share your thoughts—let me know if you have any other suggestions!

downright-development · 2025-03-01T15:04:29Z

Here's some additional feedback as I just nailed down the layout structure I like, leveraged your project and another.

my root page.tsx is just this:

import { redirect } from 'next/navigation';

export default function HomePage() {
  redirect('/dashboard');
}

My root layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <AuthContextProvider>{children}</AuthContextProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

Then my authenticated layout.tsx

 "use client";

import Nav from "@/components/nav";
import { useAuth } from "@/providers/auth-context-provider";

export default function AuthenticatedLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { user, loading } = useAuth();

  // Show loading state while checking auth
  if (loading) {
    return (
      <div className="flex h-screen w-full items-center justify-center">
        <div className="text-center">
          <div className="relative h-12 w-12 animate-spin rounded-full border-2 border-t-blue-500 mx-auto" />
          <p className="mt-4 text-gray-500">Loading...</p>
        </div>
      </div>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <div className="flex flex-col min-h-screen">
      <Nav />
      <main className="flex-grow pt-[60px]">{children}</main>
    </div>
  );
}

Now the important bit - I modified my context provider to easily redirect someone if they sign out. This seems to be working really well

useEffect(() => {
    if (!loading) {
      // Define public routes that don't require authentication
      const isPublicRoute =
        pathname.includes("/(public)") || pathname.includes("/sign-in");

      // If user is not authenticated and route is not public, redirect to sign-in
      if (user === null && !isPublicRoute) {
        router.push("/sign-in");
      }
    }
  }, [user, loading, pathname, router]);

The benefit (I'm finding) of this layout is it very nicely allows you to sort your pages under public or authenticated.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Please update the name of this repo!! #225

Please update the name of this repo!! #225

downright-development commented Feb 28, 2025

milliorn commented Mar 1, 2025 •

edited

Loading

downright-development commented Mar 1, 2025 •

edited

Loading

Please update the name of this repo!! #225

Please update the name of this repo!! #225

Comments

downright-development commented Feb 28, 2025

milliorn commented Mar 1, 2025 • edited Loading

downright-development commented Mar 1, 2025 • edited Loading

milliorn commented Mar 1, 2025 •

edited

Loading

downright-development commented Mar 1, 2025 •

edited

Loading