Skip to content

Commit 02a8cd4

Browse files
brionmariobrionmario
committed
feat: Refactor authentication components to use server actions
- Updated SignInButton to handle sign-in via server actions and improved routing. - Refactored SignOutButton to utilize server actions for sign-out functionality. - Enhanced AsgardeoContext to support asynchronous signIn and signOut methods. - Introduced Asgardeo middleware for handling authentication in Next.js applications. - Created server actions for sign-in, sign-out, user retrieval, and session management. - Implemented error handling and response management for authentication actions. - Updated client configuration to support new authentication flow and environment variables. - Modified sample applications to demonstrate new authentication components and middleware.
1 parent 1b71f92 commit 02a8cd4

File tree

25 files changed

+979
-252
lines changed

25 files changed

+979
-252
lines changed

‎packages/javascript/src/AsgardeoJavaScriptClient.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@ abstract class AsgardeoJavaScriptClient<T = Config> implements AsgardeoClient<T>
5858
onSignInSuccess?: (afterSignInUrl: string) => void,
5959
): Promise<User>;
6060

61-
abstract signOut(options?: SignOutOptions, afterSignOut?: (redirectUrl: string) => void): Promise<string>;
61+
abstract signOut(options?: SignOutOptions, afterSignOut?: (afterSignOutUrl: string) => void): Promise<string>;
6262
abstract signOut(
6363
options?: SignOutOptions,
6464
sessionId?: string,
65-
afterSignOut?: (redirectUrl: string) => void,
65+
afterSignOut?: (afterSignOutUrl: string) => void,
6666
): Promise<string>;
6767

6868
abstract signUp(options?: SignUpOptions): Promise<void>;

‎packages/javascript/src/models/client.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ export interface AsgardeoClient<T> {
132132
* @param afterSignOut - Callback function to be executed after sign-out is complete.
133133
* @returns A promise that resolves to true if sign-out is successful
134134
*/
135-
signOut(options?: SignOutOptions, afterSignOut?: (redirectUrl: string) => void): Promise<string>;
135+
signOut(options?: SignOutOptions, afterSignOut?: (afterSignOutUrl: string) => void): Promise<string>;
136136

137137
/**
138138
* Signs out the currently signed-in user with an optional session ID.
@@ -143,7 +143,7 @@ export interface AsgardeoClient<T> {
143143
* @param afterSignOut - Callback function to be executed after sign-out is complete.
144144
* @returns A promise that resolves to true if sign-out is successful
145145
*/
146-
signOut(options?: SignOutOptions, sessionId?: string, afterSignOut?: (redirectUrl: string) => void): Promise<string>;
146+
signOut(options?: SignOutOptions, sessionId?: string, afterSignOut?: (afterSignOutUrl: string) => void): Promise<string>;
147147

148148
/**
149149
* Initiates a redirection-based sign-up process for the user.

‎packages/nextjs/README.md‎

Lines changed: 68 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ yarn add @asgardeo/nextjs
2323

2424
## Quick Start
2525

26+
### Option 1: Provider-based Configuration (Recommended)
27+
2628
1. Create a `.env.local` file with your Asgardeo configuration:
2729

2830
```bash
@@ -31,24 +33,64 @@ NEXT_PUBLIC_ASGARDEO_CLIENT_ID=<your-client-id>
3133
NEXT_PUBLIC_ASGARDEO_CLIENT_SECRET=<your-client-secret>
3234
```
3335

34-
2. Then create a `middleware.ts` file in your project root to handle authentication:
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:
3563

3664
```typescript
37-
import { AsgardeoNext } from '@asgardeo/nextjs';
38-
import { NextRequest } from 'next/server';
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+
```
3978

40-
const asgardeo = new AsgardeoNext();
79+
### Option 2: Middleware-based Configuration
80+
81+
2. Then create a `middleware.ts` file in your project root to handle authentication:
4182

42-
asgardeo.initialize({
83+
```typescript
84+
import { createAsgardeoMiddleware } from '@asgardeo/nextjs/middleware';
85+
86+
const middleware = createAsgardeoMiddleware({
4387
baseUrl: process.env.NEXT_PUBLIC_ASGARDEO_BASE_URL,
4488
clientId: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_ID,
4589
clientSecret: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_SECRET,
4690
afterSignInUrl: 'http://localhost:3000',
4791
});
4892

49-
export async function middleware(request: NextRequest) {
50-
return await asgardeo.middleware(request);
51-
}
93+
export { middleware };
5294

5395
export const config = {
5496
matcher: [
@@ -82,6 +124,24 @@ export default function Home() {
82124
}
83125
```
84126

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+
```
140+
141+
## Architecture
142+
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.
144+
85145
## License
86146

87147
Apache-2.0

‎packages/nextjs/package.json‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,18 @@
1919
"module": "dist/index.js",
2020
"commonjs": "dist/cjs/index.js",
2121
"exports": {
22-
"import": "./dist/index.js",
23-
"require": "./dist/cjs/index.js"
22+
".": {
23+
"import": "./dist/index.js",
24+
"require": "./dist/cjs/index.js"
25+
},
26+
"./middleware": {
27+
"import": "./dist/middleware/index.js",
28+
"require": "./dist/cjs/middleware/index.js"
29+
},
30+
"./server": {
31+
"import": "./dist/server/index.js",
32+
"require": "./dist/cjs/server/index.js"
33+
}
2434
},
2535
"files": [
2636
"dist",

0 commit comments

Comments
 (0)