Skip to content

Commit 0876e13

Browse files
EhespEhesp
committed
chore: Update nextjs example app
1 parent 164a500 commit 0876e13

File tree

37 files changed

+362
-82
lines changed

37 files changed

+362
-82
lines changed

‎examples/nextjs/.firebaserc renamed to ‎.firebaserc

File renamed without changes.

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { getCurrentUser } from "@/lib/firebase/serverApp";
2+
import { redirect } from "next/navigation";
3+
import ForgotPasswordScreen from "./screen";
4+
5+
export default async function ForgotPasswordPage() {
6+
const { currentUser } = await getCurrentUser();
7+
8+
if (currentUser) {
9+
return redirect("/");
10+
}
11+
12+
return <ForgotPasswordScreen />;
13+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
'use client';
2+
3+
import { PasswordResetScreen } from "@firebase-ui/react";
4+
import { useRouter } from "next/navigation";
5+
6+
export default function Screen() {
7+
const router = useRouter();
8+
9+
return <PasswordResetScreen onBackToSignInClick={() => router.push("/sign-in")} />;
10+
}

‎examples/nextjs/app/globals.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
@import "tailwindcss";
2-
@import "@firebase-ui/styles/src/base.css";
2+
@import "@firebase-ui/styles/src/base.css";
3+
4+
/* @import "@firebase-ui/styles/src/themes/dark.css"; */
5+
@import "@firebase-ui/styles/src/themes/brutalist.css";

‎examples/nextjs/app/layout.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import type { Metadata } from "next";
2+
import Link from 'next/link'
23
import { Geist, Geist_Mono } from "next/font/google";
3-
import { InitUI } from "@/lib/components/InitUi";
4+
import { FirebaseUIProvider } from "@/lib/firebase/ui";
5+
import { getCurrentUser } from "@/lib/firebase/serverApp";
46

57
import "./globals.css";
8+
import { Header } from "@/lib/components/header";
69

710
const geistSans = Geist({
811
variable: "--font-geist-sans",
@@ -19,17 +22,21 @@ export const metadata: Metadata = {
1922
description: "Generated by create next app",
2023
};
2124

22-
export default function RootLayout({
25+
export default async function RootLayout({
2326
children,
2427
}: Readonly<{
2528
children: React.ReactNode;
2629
}>) {
30+
const { currentUser } = await getCurrentUser();
31+
console.log("currentUser", currentUser);
32+
2733
return (
2834
<html lang="en">
2935
<body
3036
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
3137
>
32-
<InitUI>{children}</InitUI>
38+
<Header currentUser={currentUser} />
39+
<FirebaseUIProvider>{children}</FirebaseUIProvider>
3340
</body>
3441
</html>
3542
);

‎examples/nextjs/app/page.tsx

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,103 @@
1+
'use client';
2+
13
import Link from "next/link";
4+
import { useUser } from "@/lib/firebase/hooks";
25

36
export default function Home() {
7+
const user = useUser();
8+
49
return (
510
<div className="p-8">
611
<h1 className="text-3xl font-bold mb-6">Firebase UI Demo</h1>
7-
12+
<div className="mb-6">
13+
{user && <div>Welcome: {user.email || user.phoneNumber}</div>}
14+
</div>
815
<div>
916
<h2 className="text-2xl font-bold mb-4">Auth Screens</h2>
1017
<ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
1118
<li>
1219
<Link
13-
href="/sign-in-auth-screen"
20+
href="/screens/sign-in-auth-screen"
1421
className="text-blue-500 hover:underline"
1522
>
1623
Sign In Auth Screen
1724
</Link>
1825
</li>
1926
<li>
2027
<Link
21-
href="/sign-in-auth-screen-w-handlers"
28+
href="/screens/sign-in-auth-screen-w-handlers"
2229
className="text-blue-500 hover:underline"
2330
>
2431
Sign In Auth Screen with Handlers
2532
</Link>
2633
</li>
2734
<li>
2835
<Link
29-
href="/sign-in-auth-screen-w-oauth"
36+
href="/screens/sign-in-auth-screen-w-oauth"
3037
className="text-blue-500 hover:underline"
3138
>
3239
Sign In Auth Screen with OAuth
3340
</Link>
3441
</li>
3542
<li>
3643
<Link
37-
href="/email-link-auth-screen"
44+
href="/screens/email-link-auth-screen"
3845
className="text-blue-500 hover:underline"
3946
>
4047
Email Link Auth Screen
4148
</Link>
4249
</li>
4350
<li>
4451
<Link
45-
href="/email-link-auth-screen-w-oauth"
52+
href="/screens/email-link-auth-screen-w-oauth"
4653
className="text-blue-500 hover:underline"
4754
>
4855
Email Link Auth Screen with OAuth
4956
</Link>
5057
</li>
5158
<li>
5259
<Link
53-
href="/phone-auth-screen"
60+
href="/screens/phone-auth-screen"
5461
className="text-blue-500 hover:underline"
5562
>
5663
Phone Auth Screen
5764
</Link>
5865
</li>
5966
<li>
6067
<Link
61-
href="/phone-auth-screen-w-oauth"
68+
href="/screens/phone-auth-screen-w-oauth"
6269
className="text-blue-500 hover:underline"
6370
>
6471
Phone Auth Screen with OAuth
6572
</Link>
6673
</li>
6774
<li>
6875
<Link
69-
href="/sign-up-auth-screen"
76+
href="/screens/sign-up-auth-screen"
7077
className="text-blue-500 hover:underline"
7178
>
7279
Sign Up Auth Screen
7380
</Link>
7481
</li>
7582
<li>
7683
<Link
77-
href="/sign-up-auth-screen-w-oauth"
84+
href="/screens/sign-up-auth-screen-w-oauth"
7885
className="text-blue-500 hover:underline"
7986
>
8087
Sign Up Auth Screen with OAuth
8188
</Link>
8289
</li>
8390
<li>
8491
<Link
85-
href="/oauth-screen"
92+
href="/screens/oauth-screen"
8693
className="text-blue-500 hover:underline"
8794
>
8895
OAuth Screen
8996
</Link>
9097
</li>
9198
<li>
9299
<Link
93-
href="/password-reset-screen"
100+
href="/screens/password-reset-screen"
94101
className="text-blue-500 hover:underline"
95102
>
96103
Password Reset Screen

‎examples/nextjs/app/register/page.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { getCurrentUser } from "@/lib/firebase/serverApp";
2+
import { redirect } from "next/navigation";
3+
import RegisterScreen from "./screen";
4+
5+
export default async function RegisterPage() {
6+
const { currentUser } = await getCurrentUser();
7+
8+
if (currentUser) {
9+
return redirect("/");
10+
}
11+
12+
return <RegisterScreen />;
13+
}

‎examples/nextjs/app/register/screen.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client';
2+
3+
import { useUser } from "@/lib/firebase/hooks";
4+
import { GoogleSignInButton, SignUpAuthScreen } from "@firebase-ui/react";
5+
import { useRouter } from "next/navigation";
6+
import { useEffect } from "react";
7+
8+
export default function Screen() {
9+
const router = useRouter();
10+
const user = useUser();
11+
12+
// If the user signs in, redirect to the home page from the client.
13+
useEffect(() => {
14+
if (user) {
15+
router.push("/");
16+
}
17+
}, [user, router]);
18+
19+
return (
20+
<SignUpAuthScreen onBackToSignInClick={() => router.push("/sign-in")}>
21+
<GoogleSignInButton />
22+
</SignUpAuthScreen>
23+
);
24+
}

‎examples/nextjs/app/email-link-auth-screen-w-oauth/page.tsx renamed to ‎examples/nextjs/app/screens/email-link-auth-screen-w-oauth/page.tsx

File renamed without changes.

‎examples/nextjs/app/email-link-auth-screen/page.tsx renamed to ‎examples/nextjs/app/screens/email-link-auth-screen/page.tsx

File renamed without changes.

0 commit comments

Comments
 (0)