srizan/archived-next-auth
1
0
Fork 0
mirror of https://github.com/SrIzan10/next-auth.git synced 2026-05-01 10:55:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: app router style updates for example app

Browse Source
This commit is contained in:
ndom91
2023-04-27 14:17:03 +02:00
parent a99f4bd8c6
commit d837dfaea1
9 changed files with 119 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/examples/nextjs/app/client/page.tsx Normal file
View File

@@ -0,0 +1,25 @@
export default function Page() {
return (
<>
<h1>Client Side Rendering</h1>
<p>
This page uses the <strong>useSession()</strong> React Hook in the{" "}
<strong>&lt;/Header&gt;</strong> component.
</p>
<p>
The <strong>useSession()</strong> React Hook easy to use and allows
pages to render very quickly.
</p>
<p>
The advantage of this approach is that session state is shared between
pages by using the <strong>Provider</strong> in <strong>_app.js</strong>{" "}
so that navigation between pages using <strong>useSession()</strong> is
very fast.
</p>
<p>
The disadvantage of <strong>useSession()</strong> is that it requires
client side JavaScript.
</p>
</>
)
}

14
apps/examples/nextjs/app/layout.tsx
View File

@@ -1,3 +1,7 @@
import Header from "components/header"
import Footer from "components/footer"
import './styles.css'
export default function RootLayout({
children,
}: {
@@ -6,7 +10,15 @@ export default function RootLayout({
return (
<html>
<head></head>
<body>{children}</body>
<body>
<Header />
<main>
{children}
</main>
<Footer />
</body>
</html>
)
}
export const runtime = "experimental-edge"

13
apps/examples/nextjs/app/page.tsx Normal file
View File

@@ -0,0 +1,13 @@
export default function Page() {
return (
<>
<h1>NextAuth.js Example</h1>
<p>
This is an example site to demonstrate how to use{" "}
<a href="https://authjs.dev">NextAuth.js</a> for authentication.
</p>
</>
)
}
export const runtime = "experimental-edge"

4
apps/examples/nextjs/app/server-component/page.tsx
View File

@@ -1,12 +1,12 @@
import { auth } from "auth"
import { cookies, headers } from "next/headers"
function SignIn({ id, children }: any) {
function SignIn({ id, children, className }: any) {
const $cookies = cookies()
const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
return (
<form action={`/api/auth/signin/${id}`} method="post">
<button type="submit">{children}</button>
<button className={className} type="submit">{children}</button>
<input type="hidden" name="csrfToken" value={csrfToken} />
</form>
)

33
apps/examples/nextjs/app/styles.css Normal file
View File

@@ -0,0 +1,33 @@
body {
color: red;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
padding: 0 1rem 1rem 1rem;
max-width: 680px;
margin: 0 auto;
background: #fff;
color: var(--color-text);
}
li,
p {
line-height: 1.5rem;
}
a {
font-weight: 500;
}
hr {
border: 1px solid #ddd;
}
iframe {
background: #ccc;
border: 1px solid #ccc;
height: 10rem;
width: 100%;
border-radius: 0.5rem;
filter: invert(1);
}

1
apps/examples/nextjs/components/header.module.css
View File

@@ -1,5 +1,6 @@
/* Set min-height to avoid page reflow while session loading */
.signedInStatus {
position: relative;
display: block;
min-height: 4rem;
width: 100%;

47
apps/examples/nextjs/components/header.tsx
View File

@@ -1,12 +1,35 @@
import Link from "next/link"
import { useSession } from "@auth/nextjs/client"
import { auth } from "auth"
import { cookies, headers } from "next/headers"
import styles from "./header.module.css"
function SignIn({ id, children, className }: any) {
const $cookies = cookies()
const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
return (
<form action={`/api/auth/signin/${id}`} method="post">
<button className={className} type="submit">{children}</button>
<input type="hidden" name="csrfToken" value={csrfToken} />
</form>
)
}
function SignOut({ children, className }: any) {
const $cookies = cookies()
const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0]
return (
<form action="/api/auth/signout" method="post">
<button className={className} type="submit">{children}</button>
<input type="hidden" name="csrfToken" value={csrfToken} />
</form>
)
}
// The approach used in this component shows how to built a sign in and sign out
// component that works on pages which support both client and server side
// rendering, and avoids any flash incorrect content on initial page load.
export default function Header() {
const { data: session, status } = useSession()
export default async function Header() {
const session = await auth(headers())
return (
<header>
@@ -14,19 +37,13 @@ export default function Header() {
<style>{".nojs-show { opacity: 1; top: 0; }"}</style>
</noscript>
<div className={styles.signedInStatus}>
<p
className={`nojs-show ${
!session && status === "loading" ? styles.loading : styles.loaded
}`}
>
<p className={`nojs-show ${styles.loaded}`}>
{!session && (
<>
<span className={styles.notSignedInText}>
You are not signed in
</span>
<a href="/api/auth/signin" className={styles.buttonPrimary}>
Sign in
</a>
<SignIn className={styles.buttonPrimary}>Sign In</SignIn>
</>
)}
{session && (
@@ -40,9 +57,7 @@ export default function Header() {
<strong>{session.user.email} </strong>
{session.user.name ? `(${session.user.name})` : null}
</span>
<a href="/api/auth/signout" className={styles.button}>
Sign out
</a>
<SignOut className={styles.button}>Sign Out</SignOut>
</>
)}
</p>
@@ -56,7 +71,7 @@ export default function Header() {
<Link href="/client">Client</Link>
</li>
<li className={styles.navItem}>
<Link href="/server">Server</Link>
<Link href="/server-component">Server</Link>
</li>
<li className={styles.navItem}>
<Link href="/protected">Protected</Link>
@@ -72,3 +87,5 @@ export default function Header() {
</header>
)
}
export const runtime = "experimental-edge"

12
apps/examples/nextjs/components/layout.tsx
View File

@@ -1,12 +0,0 @@
import Header from "components/header"
import Footer from "components/footer"
export default function Layout({ children }) {
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>
)
}

29
apps/examples/nextjs/types/nextauth.d.ts vendored
View File

@@ -1,29 +0,0 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import NextAuth from "next-auth"
declare module "next-auth" {
/**
* Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
*/
interface Session {
// A JWT which can be used as Authorization header with supabase-js for RLS.
supabaseAccessToken?: string
user: {
/** The user's postal address. */
address: string
} & User
}
interface User {
foo: string
}
}
declare global {
namespace NodeJS {
interface ProcessEnv {
[key: string]: string;
}
}
}