Skip to content

Commit a0468ae

Browse files
3nethz3nethz
committed
chore(nuxt): update readme
1 parent 7e03e9a commit a0468ae

File tree

2 files changed

+151
-27
lines changed

2 files changed

+151
-27
lines changed

‎packages/nuxt/README.md‎

Lines changed: 148 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,165 @@
1-
<!--
2-
Get your module up and running quickly.
3-
4-
Find and replace all on all files (CMD+SHIFT+F):
5-
- Name: My Module
6-
- Package name: my-module
7-
- Description: My new Nuxt module
8-
-->
9-
10-
# My Module
1+
# Asgardeo Auth for Nuxt
112

123
[![npm version][npm-version-src]][npm-version-href]
134
[![npm downloads][npm-downloads-src]][npm-downloads-href]
145
[![License][license-src]][license-href]
156
[![Nuxt][nuxt-src]][nuxt-href]
167

17-
My new Nuxt module for doing amazing things.
8+
Nuxt module for Asgardeo - Authentication and Identity Management. Seamlessly integrate Asgardeo authentication into your Nuxt applications.
189

1910
- [✨ &nbsp;Release Notes](/CHANGELOG.md)
20-
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
21-
<!-- - [📖 &nbsp;Documentation](https://example.com) -->
11+
- [📄 &nbsp;License](LICENSE)
12+
- [🏀 &nbsp;Online Demo](https://github.com/asgardeo/web-ui-sdks/tree/main/recipes/nuxt-vite)
2213

2314
## Features
2415

25-
<!-- Highlight some of the features your module provide here -->
26-
- ⛰ &nbsp;Foo
27-
- 🚠 &nbsp;Bar
28-
- 🌲 &nbsp;Baz
16+
- 🔐 &nbsp;OAuth2/OIDC Authentication with Asgardeo
17+
- 🛡️ &nbsp;Server-side session management
18+
- 🎣 &nbsp;Vue composables for authentication
19+
- 🚀 &nbsp;Simple and easy to use API
20+
- 🔄 &nbsp;Auto-refresh token support
2921

3022
## Quick Setup
3123

3224
Install the module to your Nuxt application with one command:
3325

3426
```bash
35-
npx nuxi module add my-module
27+
npm install @asgardeo/nuxt
28+
```
29+
30+
Then, configure your Nuxt application by updating the `nuxt.config.ts` file:
31+
32+
```typescript
33+
// https://nuxt.com/docs/api/configuration/nuxt-config
34+
export default defineNuxtConfig({
35+
compatibilityDate: '2025-05-15',
36+
devtools: { enabled: true },
37+
modules: ['@asgardeo/nuxt']
38+
});
39+
```
40+
41+
Next, create a `server/api/auth/[...].ts` file and add the following code:
42+
43+
```typescript
44+
import { AsgardeoAuthHandler } from '@asgardeo/nuxt/server';
45+
46+
const config = {
47+
baseUrl: process.env.ASGARDEO_BASE_URL as string,
48+
clientID: process.env.ASGARDEO_CLIENT_ID as string,
49+
clientSecret: process.env.ASGARDEO_CLIENT_SECRET as string,
50+
signInRedirectURL: process.env.ASGARDEO_SIGN_IN_REDIRECT_URL as string,
51+
signOutRedirectURL: process.env.ASGARDEO_SIGN_OUT_REDIRECT_URL as string,
52+
scope: process.env.ASGARDEO_SCOPE?.split(",").map(scope => scope.trim()) as string[]
53+
};
54+
55+
export default AsgardeoAuthHandler(config);
56+
```
57+
58+
Also, create an `.env` file to store your environment variables:
59+
60+
```
61+
ASGARDEO_BASE_URL=https://api.asgardeo.io/t/<your-org-name>
62+
ASGARDEO_CLIENT_ID=<your-client-id>
63+
ASGARDEO_CLIENT_SECRET=<your-client-secret>
64+
ASGARDEO_SIGN_IN_REDIRECT_URL=http://localhost:3000/api/auth/callback
65+
ASGARDEO_SIGN_OUT_REDIRECT_URL=http://localhost:3000
66+
ASGARDEO_SCOPE=openid,profile,email
67+
```
68+
69+
Finally, you can use the SDK in your Vue components like this:
70+
71+
```typescript
72+
<script setup>
73+
import { useAuth } from '@asgardeo/nuxt';
74+
75+
// For authentication
76+
const { signIn, signOut, isAuthenticated, getBasicUserInfo } = useAuth();
77+
</script>
78+
79+
<template>
80+
<div>
81+
<button v-if="!isAuthenticated" @click="signIn">Sign In</button>
82+
<button v-else @click="signOut">Sign Out</button>
83+
<div v-if="isAuthenticated">
84+
<pre>{{ getBasicUserInfo() }}</pre>
85+
</div>
86+
</div>
87+
</template>
3688
```
3789

38-
That's it! You can now use My Module in your Nuxt app ✨
90+
That's it! You can now use Asgardeo Auth in your Nuxt app ✨
3991

92+
## API Reference
93+
94+
### `useAuth()`
95+
96+
The `useAuth` composable provides access to authentication functionality:
97+
98+
```typescript
99+
const {
100+
signIn,
101+
signOut,
102+
isAuthenticated,
103+
getBasicUserInfo,
104+
getIDToken,
105+
getAccessToken,
106+
getRefreshToken,
107+
getDecodedIDToken
108+
} = useAuth();
109+
```
110+
111+
| Method | Description |
112+
| ------ | ----------- |
113+
| `signIn(callbackUrl?)` | Initiates the login process. Optionally accepts a callback URL to redirect to after successful login. |
114+
| `signOut(callbackUrl?)` | Logs the user out. Optionally accepts a callback URL to redirect to after logout. |
115+
| `isAuthenticated` | Boolean ref that indicates if the user is authenticated. |
116+
| `getBasicUserInfo()` | Returns basic user information. |
117+
| `getIDToken()` | Returns the ID token. |
118+
| `getAccessToken()` | Returns the access token. |
119+
| `getRefreshToken()` | Returns the refresh token. |
120+
| `getDecodedIDToken()` | Returns the decoded ID token payload. |
121+
122+
## Configuration
123+
124+
You can also configure the module in your `nuxt.config.ts` file:
125+
126+
```typescript
127+
export default defineNuxtConfig({
128+
// ... other config
129+
modules: ['@asgardeo/nuxt'],
130+
asgardeoAuth: {
131+
// Override env variables
132+
baseUrl: 'https://api.asgardeo.io/t/your-org-name',
133+
clientID: 'your-client-id',
134+
clientSecret: 'your-client-secret',
135+
signInRedirectURL: 'http://localhost:3000/api/auth/callback',
136+
signOutRedirectURL: 'http://localhost:3000',
137+
scope: ['openid', 'profile', 'email']
138+
}
139+
});
140+
```
141+
142+
## Troubleshooting
143+
144+
### CORS Issues
145+
146+
If you encounter CORS (Cross-Origin Resource Sharing) issues when interacting with Asgardeo, make sure your Asgardeo application has the correct origins configured:
147+
148+
1. Go to the Asgardeo Console
149+
2. Navigate to your application
150+
3. Under "Protocol" tab, add your application URL to the "Allowed Origins" list (e.g., `http://localhost:3000`)
151+
152+
### Authentication Flows
153+
154+
This module uses the Authorization Code flow with PKCE by default. If you need to customize this, you can set `enablePKCE: false` in your configuration.
155+
156+
### Common Errors
157+
158+
- **Invalid Redirect URI**: Ensure your `signInRedirectURL` matches exactly what's configured in Asgardeo
159+
- **Token Validation Failed**: Check that your clock is synchronized and that your application's time is accurate
160+
- **Scope Not Granted**: Verify that your application has the necessary scopes configured in Asgardeo
161+
162+
For more troubleshooting help, refer to the [Asgardeo documentation](https://wso2.com/asgardeo/docs/).
40163

41164
## Contribution
42165

@@ -69,16 +192,15 @@ That's it! You can now use My Module in your Nuxt app ✨
69192

70193
</details>
71194

72-
73195
<!-- Badges -->
74-
[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
75-
[npm-version-href]: https://npmjs.com/package/my-module
196+
[npm-version-src]: https://img.shields.io/npm/v/@asgardeo/nuxt/latest.svg?style=flat&colorA=020420&colorB=00DC82
197+
[npm-version-href]: https://npmjs.com/package/@asgardeo/nuxt
76198

77-
[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
78-
[npm-downloads-href]: https://npm.chart.dev/my-module
199+
[npm-downloads-src]: https://img.shields.io/npm/dm/@asgardeo/nuxt.svg?style=flat&colorA=020420&colorB=00DC82
200+
[npm-downloads-href]: https://npm.chart.dev/@asgardeo/nuxt
79201

80-
[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
81-
[license-href]: https://npmjs.com/package/my-module
202+
[license-src]: https://img.shields.io/npm/l/@asgardeo/nuxt.svg?style=flat&colorA=020420&colorB=00DC82
203+
[license-href]: https://npmjs.com/package/@asgardeo/nuxt
82204

83205
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
84206
[nuxt-href]: https://nuxt.com

‎packages/nuxt/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@
4141
}
4242
},
4343
"files": [
44-
"dist"
44+
"dist",
45+
"LICENSE",
46+
"README.md"
4547
],
4648
"scripts": {
4749
"build": "nuxt module-build prepare && nuxt module-build build",

0 commit comments

Comments
 (0)