|
8 | 8 | <a href="./LICENSE"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a> |
9 | 9 | </div> |
10 | 10 |
|
11 | | -## Installation |
12 | | - |
13 | | -```bash |
14 | | -# Using npm |
15 | | -npm install @asgardeo/nextjs |
16 | | - |
17 | | -# or using pnpm |
18 | | -pnpm add @asgardeo/nextjs |
19 | | - |
20 | | -# or using yarn |
21 | | -yarn add @asgardeo/nextjs |
22 | | -``` |
23 | | - |
24 | 11 | ## Quick Start |
25 | 12 |
|
26 | | -### Option 1: Provider-based Configuration (Recommended) |
27 | | - |
28 | | -1. Create a `.env.local` file with your Asgardeo configuration: |
29 | | - |
30 | | -```bash |
31 | | -NEXT_PUBLIC_ASGARDEO_BASE_URL=https://api.asgardeo.io/t/<your-organization-name> |
32 | | -NEXT_PUBLIC_ASGARDEO_CLIENT_ID=<your-client-id> |
33 | | -NEXT_PUBLIC_ASGARDEO_CLIENT_SECRET=<your-client-secret> |
34 | | -``` |
35 | | - |
36 | | -2. Add the `AsgardeoProvider` to your root layout with configuration: |
37 | | - |
38 | | -```tsx |
39 | | -// app/layout.tsx |
40 | | -import { AsgardeoProvider } from '@asgardeo/nextjs'; |
41 | | - |
42 | | -export default function RootLayout({ children }: { children: React.ReactNode }) { |
43 | | - const asgardeoConfig = { |
44 | | - baseUrl: process.env.NEXT_PUBLIC_ASGARDEO_BASE_URL, |
45 | | - clientId: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_ID, |
46 | | - clientSecret: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_SECRET, |
47 | | - afterSignInUrl: process.env.NEXT_PUBLIC_ASGARDEO_AFTER_SIGN_IN_URL || 'http://localhost:3000', |
48 | | - }; |
49 | | - |
50 | | - return ( |
51 | | - <html lang="en"> |
52 | | - <body> |
53 | | - <AsgardeoProvider config={asgardeoConfig}> |
54 | | - {children} |
55 | | - </AsgardeoProvider> |
56 | | - </body> |
57 | | - </html> |
58 | | - ); |
59 | | -} |
60 | | -``` |
61 | | - |
62 | | -3. Create a simple `middleware.ts` file in your project root: |
63 | | - |
64 | | -```typescript |
65 | | -import { asgardeoMiddleware } from '@asgardeo/nextjs/middleware'; |
66 | | - |
67 | | -export default asgardeoMiddleware; |
68 | | - |
69 | | -export const config = { |
70 | | - matcher: [ |
71 | | - // Skip Next.js internals and all static files, unless found in search params |
72 | | - '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', |
73 | | - // Always run for API routes |
74 | | - '/(api|trpc)(.*)', |
75 | | - ], |
76 | | -}; |
77 | | -``` |
78 | | - |
79 | | -### Option 2: Middleware-based Configuration |
80 | | - |
81 | | -2. Then create a `middleware.ts` file in your project root to handle authentication: |
82 | | - |
83 | | -```typescript |
84 | | -import { createAsgardeoMiddleware } from '@asgardeo/nextjs/middleware'; |
85 | | - |
86 | | -const middleware = createAsgardeoMiddleware({ |
87 | | - baseUrl: process.env.NEXT_PUBLIC_ASGARDEO_BASE_URL, |
88 | | - clientId: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_ID, |
89 | | - clientSecret: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_SECRET, |
90 | | - afterSignInUrl: 'http://localhost:3000', |
91 | | -}); |
92 | | - |
93 | | -export { middleware }; |
94 | | - |
95 | | -export const config = { |
96 | | - matcher: [ |
97 | | - '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)', |
98 | | - '/(api|trpc)(.*)', |
99 | | - ], |
100 | | -}; |
101 | | -``` |
102 | | - |
103 | | -3. Add `SignInButton` and `SignOutButton` buttons to your app |
104 | | - |
105 | | -```tsx |
106 | | -import styles from './page.module.css'; |
107 | | -import {SignInButton, SignedIn, SignOutButton, SignedOut} from '@asgardeo/nextjs'; |
108 | | - |
109 | | -export default function Home() { |
110 | | - return ( |
111 | | - <div className={styles.page}> |
112 | | - <main className={styles.main}> |
113 | | - <div className={styles.ctas}> |
114 | | - <SignedOut> |
115 | | - <SignInButton className={styles.primary}>Sign In</SignInButton> |
116 | | - </SignedOut> |
117 | | - <SignedIn> |
118 | | - <SignOutButton className={styles.secondary}>Sign Out</SignOutButton> |
119 | | - </SignedIn> |
120 | | - </div> |
121 | | - </main> |
122 | | - </div> |
123 | | - ); |
124 | | -} |
125 | | -``` |
126 | | - |
127 | | -## Server-side Usage |
128 | | - |
129 | | -You can access the Asgardeo client instance in server actions and other server-side code: |
130 | | - |
131 | | -```typescript |
132 | | -import { getAsgardeoClient } from '@asgardeo/nextjs/server'; |
133 | | - |
134 | | -export async function getUserProfile() { |
135 | | - const client = getAsgardeoClient(); |
136 | | - const user = await client.getUser(); |
137 | | - return user; |
138 | | -} |
139 | | -``` |
| 13 | +Get started with Asgardeo in your Next.js application in minutes. Follow our [Next.js Quick Start Guide](https://wso2.com/asgardeo/docs/quick-starts/nextjs/) for step-by-step instructions on integrating authentication into your app. |
140 | 14 |
|
141 | | -## Architecture |
| 15 | +## API Documentation |
142 | 16 |
|
143 | | -The SDK uses a singleton pattern for the `AsgardeoNextClient` to ensure consistent authentication state across your application. The client is automatically initialized when you provide configuration through the `AsgardeoProvider` or through the middleware configuration. |
| 17 | +For complete API documentation including all components, hooks, and customization options, see the [Next.js SDK Documentation](https://wso2.com/asgardeo/docs/sdks/nextjs/overview). |
144 | 18 |
|
145 | 19 | ## License |
146 | 20 |
|
147 | | -Apache-2.0 |
| 21 | +Licenses this source under the Apache License, Version 2.0 [LICENSE](./LICENSE), You may not use this file except in compliance with the License. |
0 commit comments