@floatingpixels/supabase-nuxt 0.3.5 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -13
- package/dist/module.json +1 -1
- package/dist/module.mjs +2 -2
- package/dist/runtime/server/auth/callback.js +2 -2
- package/dist/runtime/server/auth/confirm.js +2 -2
- package/package.json +15 -15
package/README.md
CHANGED
|
@@ -125,7 +125,7 @@ const signInWithOtp = async () => {
|
|
|
125
125
|
const { error } = await supabase.auth.signInWithOtp({
|
|
126
126
|
email: email.value,
|
|
127
127
|
options: {
|
|
128
|
-
emailRedirectTo: 'http://localhost:3000/
|
|
128
|
+
emailRedirectTo: 'http://localhost:3000/welcome',
|
|
129
129
|
},
|
|
130
130
|
})
|
|
131
131
|
if (error) console.log(error)
|
|
@@ -148,22 +148,22 @@ Once the authorization flow is triggered using the `auth` wrapper of the `useSup
|
|
|
148
148
|
|
|
149
149
|
### E-Mail Authentication
|
|
150
150
|
|
|
151
|
-
When using e-mail authentication, a confirmation e-mail is sent to new users, and an e-mail containing a magic link is sent to existing users. For those links to work with your application, you need to adjust the e-mail templates in your Supabase settings under `Authentication -> Email Templates`. The generated links must contain a `token_hash` and `type` URL parameter, and point to the confirmation URL of your app, which is `/
|
|
151
|
+
When using e-mail authentication, a confirmation e-mail is sent to new users, and an e-mail containing a magic link is sent to existing users. For those links to work with your application, you need to adjust the e-mail templates in your Supabase settings under `Authentication -> Email Templates`. The generated links must contain a `token_hash` and `type` URL parameter, and point to the confirmation URL of your app, which is `/auth/confirm` by default. In addition you can set the URL parameter `redirect_to` to determine the route users will be forwarded to in your app when authorization is successful. If `redirect_to` is omitted, it will route to `/`. An example template looks like this:
|
|
152
152
|
|
|
153
153
|
```html
|
|
154
154
|
<h2>Confirm your signup</h2>
|
|
155
155
|
|
|
156
|
+
<p>Hello {{ .Data.first_name }}</p>
|
|
156
157
|
<p>Follow this link to confirm your user:</p>
|
|
157
158
|
<p>
|
|
158
|
-
<a href="{{ .SiteURL }}/supabase/auth/confirm?token_hash={{ .TokenHash }}&type=email&
|
|
159
|
-
>Confirm your email</a
|
|
159
|
+
<a href="{{ .SiteURL }}/supabase/auth/confirm?token_hash={{ .TokenHash }}&type=email&redirect_to={{ .RedirectTo }}>Confirm your email</a
|
|
160
160
|
>
|
|
161
161
|
</p>
|
|
162
162
|
```
|
|
163
163
|
|
|
164
|
-
The confirmation route on your server is provided by this module, so you don't need to implement it yourself. It's available at `/
|
|
164
|
+
The confirmation route on your server is provided by this module, so you don't need to implement it yourself. It's available at `/auth/confirm`. It will automatically confirm the user and re-direct to the `redirect_to` route.
|
|
165
165
|
|
|
166
|
-
If you want to customize the confirmation route, you can do so by creating a server route to handle the request, and point to it in your Supabase e-mail template. Your custom route will receive the `token_hash` and `type` URL parameters, and the `
|
|
166
|
+
If you want to customize the confirmation route, you can do so by creating a server route to handle the request, and point to it in your Supabase e-mail template. Your custom route will receive the `token_hash` and `type` URL parameters, and the `redirect_to` URL parameter if provided. You can use the `useSupabaseClient` composable to confirm the user and re-direct to the `next` route:
|
|
167
167
|
|
|
168
168
|
> ⚠️ You can use the provided confirm route at `/supabase/confirm`, the implementation of a custom route is optional!
|
|
169
169
|
|
|
@@ -175,7 +175,7 @@ export default defineEventHandler(async event => {
|
|
|
175
175
|
const query = getQuery(event)
|
|
176
176
|
const token_hash = query.token_hash as string
|
|
177
177
|
const type = query.type as EmailOtpType | null
|
|
178
|
-
const
|
|
178
|
+
const redirect_to = (query.redirect_to as string) ?? '/'
|
|
179
179
|
|
|
180
180
|
if (!token_hash || !type) {
|
|
181
181
|
throw createError({ statusMessage: 'Invalid token' })
|
|
@@ -188,20 +188,20 @@ export default defineEventHandler(async event => {
|
|
|
188
188
|
throw createError({ statusMessage: error.message })
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
await sendRedirect(event,
|
|
191
|
+
await sendRedirect(event, redirect_to, 302)
|
|
192
192
|
})
|
|
193
193
|
```
|
|
194
194
|
|
|
195
195
|
### OAuth Authentication
|
|
196
196
|
|
|
197
|
-
When using OAuth authentication, you need to configure the OAuth provider in your Supabase settings under `Authentication -> Providers`. You can then use the `signInWithOAuth` method of the `auth` wrapper of the `useSupabaseClient` composable to initiate the authorization flow. This module provides a default callback under `/
|
|
197
|
+
When using OAuth authentication, you need to configure the OAuth provider in your Supabase settings under `Authentication -> Providers`. You can then use the `signInWithOAuth` method of the `auth` wrapper of the `useSupabaseClient` composable to initiate the authorization flow. This module provides a default callback under `/auth/callback` that you can provide to the authentication function:
|
|
198
198
|
|
|
199
199
|
```ts [pages/login.vue]
|
|
200
200
|
const signInWithOAuth = async () => {
|
|
201
201
|
const { error } = await supabase.auth.signInWithOAuth({
|
|
202
202
|
provider: 'github',
|
|
203
203
|
options: {
|
|
204
|
-
redirectTo: 'http://<your-site-url>/
|
|
204
|
+
redirectTo: 'http://<your-site-url>/auth/callback',
|
|
205
205
|
},
|
|
206
206
|
})
|
|
207
207
|
if (error) console.log(error)
|
|
@@ -210,7 +210,7 @@ const signInWithOAuth = async () => {
|
|
|
210
210
|
|
|
211
211
|
You can customize the callback by creating your own server route, and point to it when calling `signInWithOAuth`. The callback route will receive a code, that needs to be exchanged for a session. Here is an example:
|
|
212
212
|
|
|
213
|
-
> ⚠️ You can use the provided callback route at `/
|
|
213
|
+
> ⚠️ You can use the provided callback route at `/auth/callback`, the implementation of a custom callback is optional!
|
|
214
214
|
|
|
215
215
|
```ts [server/api/callback.ts]
|
|
216
216
|
import { supabaseServerClient } from '#supabase/server'
|
|
@@ -218,7 +218,7 @@ import { supabaseServerClient } from '#supabase/server'
|
|
|
218
218
|
export default defineEventHandler(async event => {
|
|
219
219
|
const query = getQuery(event)
|
|
220
220
|
const code = query.code as string
|
|
221
|
-
const
|
|
221
|
+
const redirect_to = (query.redirect_to as string) ?? '/'
|
|
222
222
|
|
|
223
223
|
if (!code) {
|
|
224
224
|
throw createError({ statusMessage: 'No code provided' })
|
|
@@ -231,7 +231,7 @@ export default defineEventHandler(async event => {
|
|
|
231
231
|
throw createError({ statusMessage: error.message })
|
|
232
232
|
}
|
|
233
233
|
|
|
234
|
-
await sendRedirect(event,
|
|
234
|
+
await sendRedirect(event, redirect_to, 302)
|
|
235
235
|
})
|
|
236
236
|
```
|
|
237
237
|
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -45,12 +45,12 @@ const module = defineNuxtModule({
|
|
|
45
45
|
serviceRoleKey: options.serviceRoleKey
|
|
46
46
|
};
|
|
47
47
|
addServerHandler({
|
|
48
|
-
route: "/
|
|
48
|
+
route: "/auth/confirm",
|
|
49
49
|
handler: resolve("./runtime/server/auth/confirm"),
|
|
50
50
|
method: "get"
|
|
51
51
|
});
|
|
52
52
|
addServerHandler({
|
|
53
|
-
route: "/
|
|
53
|
+
route: "/auth/callback",
|
|
54
54
|
handler: resolve("./runtime/server/auth/callback"),
|
|
55
55
|
method: "get"
|
|
56
56
|
});
|
|
@@ -3,7 +3,7 @@ import { supabaseServerClient } from "#supabase/server";
|
|
|
3
3
|
export default defineEventHandler(async (event) => {
|
|
4
4
|
const query = getQuery(event);
|
|
5
5
|
const code = query.code;
|
|
6
|
-
const
|
|
6
|
+
const redirect_to = query.redirect_to ?? "/";
|
|
7
7
|
if (!code) {
|
|
8
8
|
throw createError({ statusMessage: "No code provided" });
|
|
9
9
|
}
|
|
@@ -12,5 +12,5 @@ export default defineEventHandler(async (event) => {
|
|
|
12
12
|
if (error) {
|
|
13
13
|
throw createError({ statusMessage: error.message });
|
|
14
14
|
}
|
|
15
|
-
await sendRedirect(event,
|
|
15
|
+
await sendRedirect(event, redirect_to, 302);
|
|
16
16
|
});
|
|
@@ -4,7 +4,7 @@ export default defineEventHandler(async (event) => {
|
|
|
4
4
|
const query = getQuery(event);
|
|
5
5
|
const token_hash = query.token_hash;
|
|
6
6
|
const type = query.type;
|
|
7
|
-
const
|
|
7
|
+
const redirect_to = query.redirect_to ?? "/";
|
|
8
8
|
if (!token_hash || !type) {
|
|
9
9
|
throw createError({ statusMessage: "Invalid token" });
|
|
10
10
|
}
|
|
@@ -13,5 +13,5 @@ export default defineEventHandler(async (event) => {
|
|
|
13
13
|
if (error) {
|
|
14
14
|
throw createError({ statusMessage: error.message });
|
|
15
15
|
}
|
|
16
|
-
await sendRedirect(event,
|
|
16
|
+
await sendRedirect(event, redirect_to, 302);
|
|
17
17
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@floatingpixels/supabase-nuxt",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "Supabase module for Nuxt",
|
|
5
5
|
"repository": "floatingpixels/supabase-nuxt",
|
|
6
6
|
"license": "MIT",
|
|
@@ -60,34 +60,34 @@
|
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
62
|
"@supabase/ssr": "^0.5.2",
|
|
63
|
-
"@supabase/supabase-js": "^2.
|
|
63
|
+
"@supabase/supabase-js": "^2.48.1"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
66
|
"@nuxt/devtools": "^1.7.0",
|
|
67
|
-
"@nuxt/eslint-config": "^0.
|
|
68
|
-
"@nuxt/kit": "^3.15.
|
|
67
|
+
"@nuxt/eslint-config": "^1.0.0",
|
|
68
|
+
"@nuxt/kit": "^3.15.4",
|
|
69
69
|
"@nuxt/module-builder": "^0.8.4",
|
|
70
|
-
"@nuxt/schema": "^3.15.
|
|
70
|
+
"@nuxt/schema": "^3.15.4",
|
|
71
71
|
"@nuxt/test-utils": "3.15.4",
|
|
72
|
-
"@playwright/test": "^1.
|
|
73
|
-
"@snaplet/copycat": "^
|
|
72
|
+
"@playwright/test": "^1.50.1",
|
|
73
|
+
"@snaplet/copycat": "^6.0.0",
|
|
74
74
|
"@snaplet/seed": "^0.98.0",
|
|
75
75
|
"@types/eslint-config-prettier": "^6.11.3",
|
|
76
|
-
"@types/node": "^22.
|
|
76
|
+
"@types/node": "^22.13.1",
|
|
77
77
|
"@vitest/coverage-v8": "2.1.8",
|
|
78
78
|
"@vue/test-utils": "^2.4.6",
|
|
79
79
|
"changelogen": "^0.5.7",
|
|
80
|
-
"eslint": "^9.
|
|
80
|
+
"eslint": "^9.19.0",
|
|
81
81
|
"eslint-config-prettier": "^10.0.1",
|
|
82
|
-
"happy-dom": "^16.
|
|
83
|
-
"nuxt": "^3.15.
|
|
84
|
-
"playwright-core": "^1.
|
|
82
|
+
"happy-dom": "^16.8.1",
|
|
83
|
+
"nuxt": "^3.15.4",
|
|
84
|
+
"playwright-core": "^1.50.1",
|
|
85
85
|
"postgres": "^3.4.5",
|
|
86
86
|
"prettier": "^3.4.2",
|
|
87
|
-
"release-it": "^18.1.
|
|
88
|
-
"supabase": "^2.6
|
|
87
|
+
"release-it": "^18.1.2",
|
|
88
|
+
"supabase": "^2.9.6",
|
|
89
89
|
"typescript": "5.7.3",
|
|
90
|
-
"vitest": "^2.1.
|
|
90
|
+
"vitest": "^2.1.9",
|
|
91
91
|
"vue-tsc": "^2.2.0"
|
|
92
92
|
}
|
|
93
93
|
}
|