Skip to content

Commit 06e9a59

Browse files
brionmariobrionmario
committed
docs: update Quickstart guide for React to include User component example
1 parent 4d0f4c9 commit 06e9a59

File tree

2 files changed

+247
-9
lines changed

2 files changed

+247
-9
lines changed

‎packages/nextjs/QUICKSTART.md‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
# `@asgardeo/nextjs` Quickstart
2+
3+
This guide will help you quickly integrate Asgardeo authentication into your Next.js application using Auth.js.
4+
5+
## Prerequisites
6+
7+
- [Node.js](https://nodejs.org/en/download) (version 18 or later. LTS version recommended)
8+
- An [Asgardeo account](https://wso2.com/asgardeo/docs/get-started/create-asgardeo-account/)
9+
- About 15 minutes
10+
11+
## Step 1: Configure an Application in Asgardeo
12+
13+
1. **Sign in to Asgardeo Console**
14+
- Go to [Asgardeo Console](https://console.asgardeo.io/)
15+
- Sign in with your Asgardeo account
16+
17+
2. **Create a New Application**
18+
- Click **Applications** in the left sidebar
19+
- Click **+ New Application**
20+
- Choose **Traditional Web Application**
21+
- Enter your application name (e.g., "Teamspace")
22+
23+
3. **Note Down Your Credentials from the `Quickstart` tab**
24+
- From the **Protocol** tab:
25+
- Copy the **Client ID**
26+
- Copy the **Client Secret**
27+
- From the **Info** tab:
28+
- Copy the **Issuer URL**
29+
30+
4. **Configure Application Settings from the `Protocol` tab**
31+
- **Authorized redirect URLs**: Add your callback URL
32+
- `http://localhost:3000`
33+
- Click **Update** to save the configuration
34+
35+
## Step 2: Create a Next.js Application
36+
37+
If you don't have a Next.js application set up yet, you can create one:
38+
39+
```bash
40+
# Using npm
41+
npm create next-app@latest next-sample -- --yes
42+
cd next-sample
43+
44+
# Using pnpm
45+
pnpm create next-app@latest next-sample -- --yes
46+
cd next-sample
47+
48+
# Using yarn
49+
yarn create next-app next-sample -- --yes
50+
cd next-sample
51+
```
52+
53+
## Step 3: Install the SDK
54+
55+
Install the Asgardeo Next.js SDK in your project:
56+
57+
```bash
58+
# Using npm
59+
npm install @asgardeo/nextjs
60+
61+
# Using pnpm
62+
pnpm add @asgardeo/nextjs
63+
64+
# Using yarn
65+
yarn add @asgardeo/nextjs
66+
```
67+
68+
## Step 4: Setup Environment Variables
69+
70+
Create a `.env` file in your project root and add the following environment variables. Replace the placeholders with the values you copied from Asgardeo in Step 1.
71+
72+
**.env**
73+
74+
```bash
75+
NEXT_PUBLIC_ASGARDEO_BASE_URL="https://api.asgardeo.io/t/<your-org-name>"
76+
NEXT_PUBLIC_ASGARDEO_CLIENT_ID="<your-app-client-id>"
77+
ASGARDEO_CLIENT_SECRET="<your-app-client-secret>"
78+
```
79+
80+
## Step 5: Setup the Middleware
81+
82+
Create a `middleware.ts` file in your project root to handle authentication:
83+
84+
```bash
85+
import { AsgardeoNext } from '@asgardeo/nextjs';
86+
import { NextRequest } from 'next/server';
87+
88+
const asgardeo = new AsgardeoNext();
89+
90+
asgardeo.initialize({
91+
baseUrl: process.env.NEXT_PUBLIC_ASGARDEO_BASE_URL,
92+
clientId: process.env.NEXT_PUBLIC_ASGARDEO_CLIENT_ID,
93+
clientSecret: process.env.ASGARDEO_CLIENT_SECRET,
94+
});
95+
96+
export async function middleware(request: NextRequest) {
97+
return await asgardeo.middleware(request);
98+
}
99+
100+
export const config = {
101+
matcher: [
102+
'/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
103+
'/(api|trpc)(.*)',
104+
],
105+
};
106+
```
107+
108+
## Step 6: Configure the Provider
109+
110+
Wrap your application with the `AsgardeoProvider` in your main entry file i.e. `app/layout.tsx`:
111+
112+
```tsx
113+
import type { Metadata } from "next";
114+
import { Geist, Geist_Mono } from "next/font/google";
115+
import {AsgardeoProvider} from '@asgardeo/nextjs';
116+
import "./globals.css";
117+
118+
const geistSans = Geist({
119+
variable: "--font-geist-sans",
120+
subsets: ["latin"],
121+
});
122+
123+
const geistMono = Geist_Mono({
124+
variable: "--font-geist-mono",
125+
subsets: ["latin"],
126+
});
127+
128+
export const metadata: Metadata = {
129+
title: "Create Next App",
130+
description: "Generated by create next app",
131+
};
132+
133+
export default function RootLayout({
134+
children,
135+
}: Readonly<{
136+
children: React.ReactNode;
137+
}>) {
138+
return (
139+
<html lang="en">
140+
<body
141+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
142+
>
143+
<AsgardeoProvider>{children}</AsgardeoProvider>
144+
</body>
145+
</html>
146+
);
147+
}
148+
```
149+
150+
## Step 7: Add Sign-in & Sign-out to Your App
151+
152+
Update your `app/page.tsx` to include sign-in and sign-out functionality:
153+
154+
```tsx
155+
import {SignInButton, SignedIn, SignOutButton, SignedOut} from '@asgardeo/nextjs';
156+
157+
export default function Home() {
158+
return (
159+
<>
160+
<SignedOut>
161+
<SignInButton />
162+
</SignedOut>
163+
<SignedIn>
164+
<SignOutButton />
165+
</SignedIn>
166+
</>
167+
);
168+
}
169+
```
170+
171+
## Step 8: Display User Information
172+
173+
You can also display user information by using the `User` component & the `UserProfile` component:
174+
175+
```tsx
176+
import { SignedIn, SignedOut, SignInButton, SignOutButton, User, UserProfile } from '@asgardeo/nextjs';
177+
178+
export default function Home() {
179+
return (
180+
<>
181+
<SignedIn>
182+
<User>
183+
{({ user }) => (
184+
<div>
185+
<h1>Welcome, {user.username}</h1>
186+
</div>
187+
)}
188+
</User>
189+
<UserProfile />
190+
<SignOutButton />
191+
</SignedIn>
192+
<SignedOut>
193+
<SignInButton />
194+
</SignedOut>
195+
</>
196+
);
197+
}
198+
```
199+
200+
## Step 9: Try Login
201+
202+
Run your application and test the sign-in functionality. You should see a "Sign In" button when you're not signed in, and clicking it will redirect you to the Asgardeo sign-in page.
203+
204+
```bash
205+
# Using npm
206+
npm run dev
207+
208+
# Using pnpm
209+
pnpm dev
210+
211+
# Using yarn
212+
yarn dev
213+
```
214+
215+
## Next Steps
216+
217+
🎉 **Congratulations!** You've successfully integrated Asgardeo authentication into your Next.js app.
218+
219+
### What to explore next:
220+
221+
- **User Profile Management** - Access and display detailed user profile information
222+
- **Protected Routes** - Implement route-level authentication using middleware
223+
- **Custom Styling** - Customize the appearance of your authentication flow
224+
- **Session Management** - Learn about managing user sessions and tokens
225+
- **Error Handling** - Implement proper error handling for authentication flows
226+
227+
### Common Issues
228+
229+
- **Redirect URL Mismatch**: Ensure your redirect URL in Asgardeo matches exactly: `http://localhost:3000`
230+
- **Environment Variables**: Double-check that all environment variables are correctly set in `.env`
231+
232+
### Additional Resources
233+
234+
- **[Auth.js Documentation](https://authjs.dev/)** - Learn more about Auth.js features and configuration
235+
- **[Asgardeo Documentation](https://wso2.com/asgardeo/docs/)** - Comprehensive guide to Asgardeo features
236+
- **[Next.js Documentation](https://nextjs.org/docs)** - Learn more about Next.js features and best practices
237+
238+
For more help, visit the [Asgardeo Documentation](https://wso2.com/asgardeo/docs/) or check out our [examples](../../examples/).

‎packages/react/QUICKSTART.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -114,22 +114,22 @@ export default App
114114

115115
You can also display user information by using the `User` component & the `UserProfile` component:
116116

117-
```diff
117+
```tsx
118118
import { SignedIn, SignedOut, SignInButton, SignOutButton, User, UserProfile } from '@asgardeo/react'
119119
import './App.css'
120120

121121
function App() {
122122
return (
123123
<>
124124
<SignedIn>
125-
+ <User>
126-
+ {({ user }) => (
127-
+ <div>
128-
+ <h1>Welcome, {user.username}</h1>
129-
+ </div>
130-
+ )}
131-
+ </User>
132-
+ <UserProfile />
125+
<User>
126+
{({ user }) => (
127+
<div>
128+
<h1>Welcome, {user.username}</h1>
129+
</div>
130+
)}
131+
</User>
132+
<UserProfile />
133133
<SignOutButton />
134134
</SignedIn>
135135
<SignedOut>

0 commit comments

Comments
 (0)