From bb4d5ce29bdac65af448b024b26ce828452a121f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Fri, 5 May 2023 14:32:40 +0200 Subject: [PATCH] update dev app --- apps/dev/nextjs/app/client.tsx | 10 +++ apps/dev/nextjs/app/footer.module.css | 14 --- apps/dev/nextjs/app/header.module.css | 90 ------------------- apps/dev/nextjs/app/header.tsx | 75 ---------------- apps/dev/nextjs/app/layout.tsx | 44 ++++++++- apps/dev/nextjs/app/loading.tsx | 7 -- apps/dev/nextjs/app/page.tsx | 8 +- apps/dev/nextjs/auth.ts | 24 +++-- .../{access-denied.js => access-denied.tsx} | 2 +- apps/dev/nextjs/components/footer.js | 28 ------ .../dev/nextjs/{app => components}/footer.tsx | 0 apps/dev/nextjs/components/header.js | 83 ----------------- apps/dev/nextjs/components/header.module.css | 14 +-- apps/dev/nextjs/components/header.tsx | 55 ++++++++++++ apps/dev/nextjs/components/layout.js | 12 --- apps/dev/nextjs/pages/_app.js | 10 --- apps/dev/nextjs/pages/_app.tsx | 39 ++++++++ .../nextjs/pages/api/examples/protected.ts | 5 +- apps/dev/nextjs/pages/credentials.js | 67 -------------- apps/dev/nextjs/pages/credentials.tsx | 67 ++++++++++++++ apps/dev/nextjs/pages/policy.js | 10 +-- apps/dev/nextjs/pages/protected-ssr.js | 42 +++------ 22 files changed, 263 insertions(+), 443 deletions(-) create mode 100644 apps/dev/nextjs/app/client.tsx delete mode 100644 apps/dev/nextjs/app/footer.module.css delete mode 100644 apps/dev/nextjs/app/header.module.css delete mode 100644 apps/dev/nextjs/app/header.tsx delete mode 100644 apps/dev/nextjs/app/loading.tsx rename apps/dev/nextjs/components/{access-denied.js => access-denied.tsx} (88%) delete mode 100644 apps/dev/nextjs/components/footer.js rename apps/dev/nextjs/{app => components}/footer.tsx (100%) delete mode 100644 apps/dev/nextjs/components/header.js create mode 100644 apps/dev/nextjs/components/header.tsx delete mode 100644 apps/dev/nextjs/components/layout.js delete mode 100644 apps/dev/nextjs/pages/_app.js create mode 100644 apps/dev/nextjs/pages/_app.tsx delete mode 100644 apps/dev/nextjs/pages/credentials.js create mode 100644 apps/dev/nextjs/pages/credentials.tsx diff --git a/apps/dev/nextjs/app/client.tsx b/apps/dev/nextjs/app/client.tsx new file mode 100644 index 00000000..40d6f905 --- /dev/null +++ b/apps/dev/nextjs/app/client.tsx @@ -0,0 +1,10 @@ +"use client" + +import { useEffect } from "react" + +export default function Client({ session }: any) { + useEffect(() => { + console.log(window.location) + }) + return
{JSON.stringify(session)}
+} diff --git a/apps/dev/nextjs/app/footer.module.css b/apps/dev/nextjs/app/footer.module.css deleted file mode 100644 index 020bec64..00000000 --- a/apps/dev/nextjs/app/footer.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.footer { - margin-top: 2rem; -} - -.navItems { - margin-bottom: 1rem; - padding: 0; - list-style: none; -} - -.navItem { - display: inline-block; - margin-right: 1rem; -} diff --git a/apps/dev/nextjs/app/header.module.css b/apps/dev/nextjs/app/header.module.css deleted file mode 100644 index 2f518568..00000000 --- a/apps/dev/nextjs/app/header.module.css +++ /dev/null @@ -1,90 +0,0 @@ -/* Set min-height to avoid page reflow while session loading */ -.signedInStatus { - display: flex; - align-items: center; - min-height: 4rem; - width: 100%; -} - -.loading, -.loaded { - position: relative; - top: 0; - opacity: 1; - overflow: hidden; - border-radius: 0 0 0.6rem 0.6rem; - padding: 0.6rem 1rem; - margin: 0; - background-color: rgba(0, 0, 0, 0.05); - transition: all 0.2s ease-in; -} - -.loading { - top: -2rem; - opacity: 0; -} - -.signedInText, -.notSignedInText { - padding-top: 0.8rem; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - z-index: 1; - line-height: 1.3rem; - flex: 1; -} - -.signedInText { - padding-top: 0rem; - left: 4.6rem; -} - -.avatar { - border-radius: 2rem; - float: left; - height: 2.8rem; - width: 2.8rem; - margin-right: 1rem; - background-color: white; - background-size: cover; - background-repeat: no-repeat; -} - -.button, -.buttonPrimary { - justify-self: end; - font-weight: 500; - border-radius: 0.3rem; - cursor: pointer; - font-size: 1rem; - line-height: 1.4rem; - padding: 0.7rem 0.8rem; - position: relative; - z-index: 10; - background-color: transparent; - color: #555; -} - -.buttonPrimary { - background-color: #346df1; - border-color: #346df1; - color: #fff; - text-decoration: none; - padding: 0.7rem 1.4rem; -} - -.buttonPrimary:hover { - box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2); -} - -.navItems { - margin-bottom: 2rem; - padding: 0; - list-style: none; -} - -.navItem { - display: inline-block; - margin-right: 1rem; -} diff --git a/apps/dev/nextjs/app/header.tsx b/apps/dev/nextjs/app/header.tsx deleted file mode 100644 index 9aa7ec07..00000000 --- a/apps/dev/nextjs/app/header.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { auth } from "auth" -import { cookies, headers } from "next/headers" -import Link from "next/link" -import styles from "./header.module.css" - -function SignIn({ id, ...props }: any) { - const $cookies = cookies() - const csrfToken = $cookies.get("next-auth.csrf-token")?.value.split("|")[0] - const action = id ? `/api/auth/signin/${id}` : "/api/auth/signin" - return ( -
-
+ } + signOut={ + + } + /> + ) +} diff --git a/apps/dev/nextjs/pages/api/examples/protected.ts b/apps/dev/nextjs/pages/api/examples/protected.ts index dc9d2b76..415c4b62 100644 --- a/apps/dev/nextjs/pages/api/examples/protected.ts +++ b/apps/dev/nextjs/pages/api/examples/protected.ts @@ -1,9 +1,8 @@ // This is an example of to protect an API route -import { authConfig } from "../auth-old/[...nextauth]" -import { getServerSession } from "next-auth/next" +import { getServerSession } from "auth" export default async (req, res) => { - const session = await getServerSession(req, res, authConfig as any) + const session = await getServerSession(req, res) if (session) { res.send({ diff --git a/apps/dev/nextjs/pages/credentials.js b/apps/dev/nextjs/pages/credentials.js deleted file mode 100644 index 97656665..00000000 --- a/apps/dev/nextjs/pages/credentials.js +++ /dev/null @@ -1,67 +0,0 @@ -// eslint-disable-next-line no-use-before-define -import * as React from "react" -import { signIn, signOut, useSession } from "next-auth/react" -import Layout from "components/layout" - -export default function Page() { - const [response, setResponse] = React.useState(null) - const handleLogin = (options) => async () => { - if (options.redirect) { - return signIn("credentials", options) - } - const response = await signIn("credentials", options) - setResponse(response) - } - - const handleLogout = (options) => async () => { - if (options.redirect) { - return signOut(options) - } - const response = await signOut(options) - setResponse(response) - } - - const { data: session } = useSession() - - if (session) { - return ( - -

Test different flows for Credentials logout

- Default: - -
- No redirect: - -
-

Response:

- 
-          {JSON.stringify(response, null, 2)}
-
- - ) - } - - return ( - -

Test different flows for Credentials login

- Default: - -
- No redirect: - -
- No redirect, wrong password: - -

Response:

- 
-        {JSON.stringify(response, null, 2)}
-
- - ) -} diff --git a/apps/dev/nextjs/pages/credentials.tsx b/apps/dev/nextjs/pages/credentials.tsx new file mode 100644 index 00000000..7beaf020 --- /dev/null +++ b/apps/dev/nextjs/pages/credentials.tsx @@ -0,0 +1,67 @@ +import * as React from "react" +import { signIn, signOut, useSession } from "@auth/nextjs/react" +import { SignInResponse, SignOutResponse } from "@auth/nextjs/lib/client" + +export default function Page() { + const [response, setResponse] = React.useState< + SignInResponse | SignOutResponse + >() + + const { data: session } = useSession() + + if (session) { + return ( + <> +

Test different flows for Credentials logout

+ Default: + +
+ No redirect: + +
+

{response ? "Response:" : "Session:"}

+ 
+          {JSON.stringify(response ?? session, null, 2)}
+
+ + ) + } + + return ( + <> +

Test different flows for Credentials login

+ Default: + +
+ No redirect: + +
+ No redirect, wrong password: + +

Response:

+ 
+        {JSON.stringify(response, null, 2)}
+
+ + ) +} diff --git a/apps/dev/nextjs/pages/policy.js b/apps/dev/nextjs/pages/policy.js index af95846b..04a76252 100644 --- a/apps/dev/nextjs/pages/policy.js +++ b/apps/dev/nextjs/pages/policy.js @@ -1,8 +1,6 @@ -import Layout from "../components/layout" - export default function Page() { return ( - + <>

This is an example site to demonstrate how to use{" "} Auth.js for authentication. @@ -18,15 +16,11 @@ export default function Page() { SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Privacy Policy

-

- This site uses JSON Web Tokens and an in-memory database which resets - every ~2 hours. -

Data provided to this site is exclusively used to support signing in and is not passed to any third party services, other than via SMTP or OAuth for the purposes of authentication.

- + ) } diff --git a/apps/dev/nextjs/pages/protected-ssr.js b/apps/dev/nextjs/pages/protected-ssr.js index 545d5a1c..2a32e729 100644 --- a/apps/dev/nextjs/pages/protected-ssr.js +++ b/apps/dev/nextjs/pages/protected-ssr.js @@ -1,48 +1,34 @@ // This is an example of how to protect content using server rendering -import { getServerSession } from "next-auth/next" -import { authConfig } from "./api/auth-old/[...nextauth]" -import Layout from "../components/layout" -import AccessDenied from "../components/access-denied" +import { getServerSession } from "auth" +import AccessDenied from "components/access-denied" export default function Page({ content, session }) { // If no session exists, display access denied message - if (!session) { - return ( - - - - ) - } + if (!session) return // If session exists, display content return ( - + <>

Protected Page

{content}

- + ) } export async function getServerSideProps(context) { - const session = await getServerSession(context.req, context.res, authConfig) - let content = null - + const session = await getServerSession(context.req, context.res) if (session) { + // Note usually you don't need to fetch from an API route in getServerSideProps + // This is done here to demonstrate how you can fetch from a third-party API + // with a valid session. Likely you would also not pass cookies but an `Authorization` header const hostname = process.env.NEXTAUTH_URL || "http://localhost:3000" - const options = { headers: { cookie: context.req.headers.cookie } } - const res = await fetch(`${hostname}/api/examples/protected`, options) - const json = await res.json() - if (json.content) { - content = json.content - } + const res = await fetch(`${hostname}/api/examples/protected`, { + headers: { cookie: context.req.headers.cookie }, + }) + return { props: { session, content: (await res.json()).content } } } - return { - props: { - session, - content, - }, - } + return { props: {} } }