Skip to content

Commit 90e8929

Browse files
Ehespexaby73
andauthored
feat: Updated examples workflow (#5)
Co-authored-by: exaby73 <[email protected]>
1 parent eb9ef8a commit 90e8929

File tree

92 files changed

+4753
-1804
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+4753
-1804
lines changed
File renamed without changes.

examples/nextjs/.gitignore

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
.pnpm-debug.log*
32+
33+
# env files (can opt-in for committing if needed)
34+
.env*
35+
36+
# vercel
37+
.vercel
38+
39+
# typescript
40+
*.tsbuildinfo
41+
next-env.d.ts

examples/nextjs/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
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).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
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.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client";
2+
3+
import { EmailLinkAuthScreen, GoogleSignInButton } from "@firebase-ui/react";
4+
5+
export default function EmailLinkAuthScreenWithOAuthPage() {
6+
return (
7+
<EmailLinkAuthScreen>
8+
<GoogleSignInButton />
9+
</EmailLinkAuthScreen>
10+
);
11+
}
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
"use client";
2+
3+
import { EmailLinkAuthScreen } from "@firebase-ui/react";
4+
5+
export default function EmailLinkAuthScreenPage() {
6+
return <EmailLinkAuthScreen />;
7+
}

examples/nextjs/app/favicon.ico

25.3 KB
Binary file not shown.

examples/nextjs/app/globals.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "tailwindcss";
2+
@import "@firebase-ui/styles/src/base.css";

examples/nextjs/app/layout.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import type { Metadata } from "next";
2+
import { Geist, Geist_Mono } from "next/font/google";
3+
import { InitUI } from "@/lib/components/InitUi";
4+
5+
import "./globals.css";
6+
7+
const geistSans = Geist({
8+
variable: "--font-geist-sans",
9+
subsets: ["latin"],
10+
});
11+
12+
const geistMono = Geist_Mono({
13+
variable: "--font-geist-mono",
14+
subsets: ["latin"],
15+
});
16+
17+
export const metadata: Metadata = {
18+
title: "Create Next App",
19+
description: "Generated by create next app",
20+
};
21+
22+
export default function RootLayout({
23+
children,
24+
}: Readonly<{
25+
children: React.ReactNode;
26+
}>) {
27+
return (
28+
<html lang="en">
29+
<body
30+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
31+
>
32+
<InitUI>{children}</InitUI>
33+
</body>
34+
</html>
35+
);
36+
}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client";
2+
3+
import { OAuthScreen, GoogleSignInButton } from "@firebase-ui/react";
4+
5+
export default function OAuthScreenPage() {
6+
return (
7+
<OAuthScreen>
8+
<GoogleSignInButton />
9+
</OAuthScreen>
10+
);
11+
}

examples/nextjs/app/page.tsx

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import Link from "next/link";
2+
3+
export default function Home() {
4+
return (
5+
<div className="p-8">
6+
<h1 className="text-3xl font-bold mb-6">Firebase UI Demo</h1>
7+
8+
<div>
9+
<h2 className="text-2xl font-bold mb-4">Auth Screens</h2>
10+
<ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
11+
<li>
12+
<Link
13+
href="/sign-in-auth-screen"
14+
className="text-blue-500 hover:underline"
15+
>
16+
Sign In Auth Screen
17+
</Link>
18+
</li>
19+
<li>
20+
<Link
21+
href="/sign-in-auth-screen-w-handlers"
22+
className="text-blue-500 hover:underline"
23+
>
24+
Sign In Auth Screen with Handlers
25+
</Link>
26+
</li>
27+
<li>
28+
<Link
29+
href="/sign-in-auth-screen-w-oauth"
30+
className="text-blue-500 hover:underline"
31+
>
32+
Sign In Auth Screen with OAuth
33+
</Link>
34+
</li>
35+
<li>
36+
<Link
37+
href="/email-link-auth-screen"
38+
className="text-blue-500 hover:underline"
39+
>
40+
Email Link Auth Screen
41+
</Link>
42+
</li>
43+
<li>
44+
<Link
45+
href="/email-link-auth-screen-w-oauth"
46+
className="text-blue-500 hover:underline"
47+
>
48+
Email Link Auth Screen with OAuth
49+
</Link>
50+
</li>
51+
<li>
52+
<Link
53+
href="/phone-auth-screen"
54+
className="text-blue-500 hover:underline"
55+
>
56+
Phone Auth Screen
57+
</Link>
58+
</li>
59+
<li>
60+
<Link
61+
href="/phone-auth-screen-w-oauth"
62+
className="text-blue-500 hover:underline"
63+
>
64+
Phone Auth Screen with OAuth
65+
</Link>
66+
</li>
67+
<li>
68+
<Link
69+
href="/sign-up-auth-screen"
70+
className="text-blue-500 hover:underline"
71+
>
72+
Sign Up Auth Screen
73+
</Link>
74+
</li>
75+
<li>
76+
<Link
77+
href="/sign-up-auth-screen-w-oauth"
78+
className="text-blue-500 hover:underline"
79+
>
80+
Sign Up Auth Screen with OAuth
81+
</Link>
82+
</li>
83+
<li>
84+
<Link
85+
href="/oauth-screen"
86+
className="text-blue-500 hover:underline"
87+
>
88+
OAuth Screen
89+
</Link>
90+
</li>
91+
<li>
92+
<Link
93+
href="/password-reset-screen"
94+
className="text-blue-500 hover:underline"
95+
>
96+
Password Reset Screen
97+
</Link>
98+
</li>
99+
</ul>
100+
</div>
101+
</div>
102+
);
103+
}

0 commit comments

Comments
 (0)