-
-
-
-
-
- Open Source. Full Stack. Own Your Data. -
- - - -## Overview - -NextAuth.js is a complete open source authentication solution. - -This is an example application that shows how `next-auth` is applied to a basic Next.js app. - -The deployed version can be found at [`next-auth-example.vercel.app`](https://next-auth-example.vercel.app) - -### About NextAuth.js - -NextAuth.js is an easy to implement, full-stack (client/server) open source authentication library originally designed for [Next.js](https://nextjs.org) and [Serverless](https://vercel.com). Our goal is to [support even more frameworks](https://github.com/nextauthjs/next-auth/issues/2294) in the future. - -Go to [next-auth.js.org](https://authjs.dev) for more information and documentation. - -> _NextAuth.js is not officially associated with Vercel or Next.js._ - -## Getting Started - -### 1. Clone the repository and install dependencies - -``` -git clone https://github.com/nextauthjs/next-auth-example.git -cd next-auth-example -pnpm install -``` - -### 2. Configure your local environment - -Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git): - -``` -cp .env.local.example .env.local -``` - -Add details for one or more providers (e.g. Google, Twitter, GitHub, Email, etc). - -#### Database - -A database is needed to persist user accounts and to support email sign in. However, you can still use NextAuth.js for authentication without a database by using OAuth for authentication. If you do not specify a database, [JSON Web Tokens](https://jwt.io/introduction) will be enabled by default. - -You **can** skip configuring a database and come back to it later if you want. - -For more information about setting up a database, please check out the following links: - -- Docs: [authjs.dev/reference/core/adapters](https://authjs.dev/reference/core/adapters) - -### 3. Configure Authentication Providers - -1. Review and update options in `auth.ts` as needed. - -2. When setting up OAuth, in the developer admin page for each of your OAuth services, you should configure the callback URL to use a callback path of `{server}/api/auth/callback/{provider}`. - -e.g. For Google OAuth you would use: `http://localhost:3000/api/auth/callback/google` - -A list of configured providers and their callback URLs is available from the endpoint `api/auth/providers`. You can find more information at https://authjs.dev/getting-started/providers/oauth-tutorial - -1. You can also choose to specify an SMTP server for passwordless sign in via email. - -### 4. Start the application - -To run your site locally, use: - -``` -pnpm run dev -``` - -To run it in production mode, use: - -``` -pnpm run build -pnpm run start -``` - -### 5. Preparing for Production - -Follow the [Deployment documentation](https://authjs.dev/getting-started/deployment) - -## License - -ISC +## Auth Client (Next.js + Tailwind + MUI + NextAuth + Axios) + +### Providers +- Credentials +- Google + +### API base URL +- `NEXT_PUBLIC_BASE_API=http://localhost:5001/api/v1` + +### Setup +1. Install dependencies: + ```bash + npm install + ``` +2. Create env file: + ```bash + cp .env.local.example .env.local + ``` +3. Run dev server: + ```bash + npm run dev + ``` + +### Notes +- Credentials provider posts to `/auth/login` on your configured base API. +- NextAuth endpoint is `/api/auth/[...nextauth]`. +- `GOOGLE_CLIENT_SECRET` must be the OAuth Client Secret from Google Cloud Console credentials, not an access token (tokens often start with `ya29.`). +- Social login flow (Google): + - After OAuth callback, frontend exchanges Google tokens with backend via: + - `AUTH_SOCIAL_GOOGLE_ENDPOINT` (default: `/auth/oauth/google`) + - Backend should return app user + app access token in one of these shapes: `{ token, data }`, `{ accessToken, user }`, or equivalent. diff --git a/app/[...proxy]/route.tsx b/app/[...proxy]/route.tsx deleted file mode 100644 index bd16f70e..00000000 --- a/app/[...proxy]/route.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { auth } from "@/auth" -import { NextRequest } from "next/server" - -// Review if we need this, and why -function stripContentEncoding(result: Response) { - const responseHeaders = new Headers(result.headers) - responseHeaders.delete("content-encoding") - - return new Response(result.body, { - status: result.status, - statusText: result.statusText, - headers: responseHeaders, - }) -} - -async function handler(request: NextRequest) { - const session = await auth() - - const headers = new Headers(request.headers) - headers.set("Authorization", `Bearer ${session?.accessToken}`) - - let backendUrl = - process.env.THIRD_PARTY_API_EXAMPLE_BACKEND ?? - "https://third-party-backend.authjs.dev" - - let url = request.nextUrl.href.replace(request.nextUrl.origin, backendUrl) - let result = await fetch(url, { headers, body: request.body }) - - return stripContentEncoding(result) -} - -export const dynamic = "force-dynamic" - -export { handler as GET, handler as POST } diff --git a/app/admin/dashboard/page.tsx b/app/admin/dashboard/page.tsx new file mode 100644 index 00000000..47e61858 --- /dev/null +++ b/app/admin/dashboard/page.tsx @@ -0,0 +1 @@ +export { default } from "../../page"; diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx new file mode 100644 index 00000000..2d41885f --- /dev/null +++ b/app/admin/layout.tsx @@ -0,0 +1,9 @@ +import RoleFolderLayout from "@/components/role-folder-layout"; + +export default function AdminLayout({ + children, +}: { + children: React.ReactNode; +}) { + return
- This page fetches data from an API{" "}
- auth()
-
- 
- 
- 
-
- {JSON.stringify(data, null, 2)}
-
-
- This page is protected by using the universal{" "}
- auth()
-
- {JSON.stringify(session, null, 2)}
-
- - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF - MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. - IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY - CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, - TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE - SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -
-- This site uses JSON Web Tokens and a Key-Value database for sessions - and WebAuthn authenticators 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. And Vercel KV / Upstash for - hosting the Key Value store. This data is deleted every 2 hours via - cron job. -
-
- This page is server-rendered as a{" "}
- auth()
-
- { - e.preventDefault() - signIn() - }} - > - You must be signed in to view this page - -
- - ) -} diff --git a/components/auth-components.tsx b/components/auth-components.tsx deleted file mode 100644 index 4baac3de..00000000 --- a/components/auth-components.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { signIn, signOut } from "auth" -import { Button } from "./ui/button" - -export function SignIn({ - provider, - ...props -}: { provider?: string } & React.ComponentPropsWithRef
- This page fetches session data client side using the{" "}
- useSession
-
- It needs the{" "}
- 'use client'
- SessionProvider
- client-example/page.tsx
- {" "}
- to provide the session data.
-
- Press the button to send a request to our{" "}
- example backend
- here
-
{apiResponse}
- - Note: This example only works when using the Keycloak provider. -
-- {children} -
- -- In this example, the whole session object is passed to the page, - including the raw user object. Our recommendation is to{" "} - only pass the necessary fields to the page, as the raw user - object may contain sensitive information. -
- ) : ( -- In this example, only some fields in the user object is passed to - the page to avoid exposing sensitive information. -
- )} -
- {JSON.stringify(session, null, 2)}
-
- - No session data, please Sign In first. -
- ) -} diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx deleted file mode 100644 index e6a93ce0..00000000 --- a/components/ui/avatar.tsx +++ /dev/null @@ -1,50 +0,0 @@ -"use client" - -import * as React from "react" -import * as AvatarPrimitive from "@radix-ui/react-avatar" - -import { cn } from "@/lib/utils" - -const Avatar = React.forwardRef< - React.ElementRef- {session.user.name} -
-- {session.user.email} -
-