Discord OAuth on Nuxt | Appwrite | Page 1

tired vault Mar 28, 2025, 9:23 PM

#

How would I go on with creating a Discord OAuth Login? Are there any examples? Should I use nuxt-appwrite or the appwrite-web package?

tired vault Mar 29, 2025, 11:20 AM

#

Is this still up to date? Seems there are multiple mistakes in the guide? Eg. wrong file names, functions that dont take arguments but the code here does. Functions missing completely? Am I doing something wrong??

https://appwrite.io/docs/tutorials/nuxt-ssr-auth/step-1

Server-side authentication with Nuxt - Docs - Appwrite

Add SSR authentication to your Nuxt app with Appwrite

tired vault Mar 29, 2025, 8:36 PM

#

<@&1319717958645452800>?

errant citrus Mar 31, 2025, 4:46 PM

#

Expanding on what is not working would be extremely helpful, I'm not a nuxt expert but if you can tell me what exactly isn't working I can try and help. Error messages, stack traces, etc are beneficial.

errant citrus Mar 31, 2025, 4:49 PM

#

tired vault How would I go on with creating a Discord OAuth Login? Are there any examples? S...

nuxt-appwrite looks pretty up-to-date so I'm sure you could use it.

you wouldn't use the appwrite web package but the node-appwrite package since nuxt, by default, does SSR you would need the server side package.

tired vault Mar 31, 2025, 5:06 PM

#

errant citrus nuxt-appwrite looks pretty up-to-date so I'm sure you could use it. you wouldn'...

There are many cases like this, where file names don’t match at all, exist multiple times with the exact opposite of the code’s function, or contain TypeScript expressions in supposedly pure JavaScript files.

#

Additionally I get a error 500 when loading the page:

500
useEvent is not defined

at setup ([REDACTED]/pages/account.js:7:21)
at _sfc_main.setup ([REDACTED]/pages/account.js:34:23)
at callWithErrorHandling ([REDACTED]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19)
at setupStatefulComponent ([REDACTED]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7848:25)
at setupComponent ([REDACTED]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7809:36)
at renderComponentVNode ([REDACTED]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:645:15)
at renderVNode ([REDACTED]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:779:14)
at renderComponentSubTree ([REDACTED]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:730:7)
at renderComponentVNode ([REDACTED]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:664:12)
at renderVNode ([REDACTED]/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:779:14)

#

Oh yeah, and none of the links for "demos-for-vue" have anything to do with ssr. And when clicking the link on the "all set" page the github repo that opens up is a 404 (https://github.com/appwrite/demos-for-vue/tree/main/server-side-rendering)

#

errant citrus Mar 31, 2025, 5:53 PM

#

I'll forward this along to the appwrite team so they can be aware of the issues with the tutorial

tired vault Mar 31, 2025, 5:54 PM

#

*Edit: I found the sourcecode on a different branch, but it doesn't work (error 500 again) -> https://github.com/appwrite/demos-for-vue/tree/feat-ssr/server-side-rendering

GitHub

demos-for-vue/server-side-rendering at feat-ssr · appwrite/demos-f...

Demos and tutorials for getting started with Appwrite + Vue.js - appwrite/demos-for-vue

tired vault Mar 31, 2025, 5:55 PM

#

errant citrus I'll forward this along to the appwrite team so they can be aware of the issues ...

Thanks!

errant citrus Mar 31, 2025, 5:56 PM

#

I'm wondering if they know there are issues since I'm not seeing this tutorial on the main tutorials page. Nevertheless it should be fixed or removed entirely imo.

tired vault Mar 31, 2025, 5:57 PM

#

I hope that there is some way that it gets updates prayge

errant citrus Mar 31, 2025, 6:03 PM

#

I think for the time being, you could just not use middleware, and check auth on each page. Remove any sort of typings. Lastly, fix the naming of the second occurance of oauth.post.js to oauth.get.js

tired vault Mar 31, 2025, 6:25 PM

#

errant citrus I think for the time being, you could just not use middleware, and check auth on...

Hmm, you mean just using the client side version?

errant citrus Mar 31, 2025, 6:30 PM

#

Here are the fixes I made that got it working

fix the env reference in the server/lib/appwrite.ts file. It should be PUBLIC_APPWRITE_ENDPOINT, and PUBLIC_APPWRITE_PROJECT_ID. Also since these are undefined you need to have a check, so I just did || "" for now.
Switch from using useEvent(), to using useRequestEvent()

Let me know if this helps any.

tired vault Mar 31, 2025, 6:57 PM

#

Yes, that kind of works. Now I only have one more error from h3:

ℹ Error: Cannot set headers after they are sent to the client

 ⁃ at ServerResponse.setHeader (node:_http_outgoing:655:11)
 ⁃ at sendRedirect ([REDACTED]/node_modules/h3/dist/index.mjs:782:18)
 ⁃ at Object.handler ([REDACTED]/server/routes/index.js:6:1)

   1 ┃  export default defineEventHandler(async (event) => {
   2 ┃          if (event.context.user) {
   3 ┃                  await sendRedirect(event, "/account");
   4 ┃          }
   5 ┃
 ❯ 6 ┃          await sendRedirect(event, "/signup");
   7 ┃  });
   8 ┃

 ⁃ at runNextTicks (node:internal/process/task_queues:60:5)
 ⁃ at process.processImmediate (node:internal/timers:454:9)
 ⁃ at process.callbackTrampoline (node:internal/async_hooks:130:17)
 ⁃ (async file:///[REDACTED]/node_modules/h3/dist/index.mjs:2009:19)
 ⁃ at async Object.callAsync ([REDACTED]/node_modules/unctx/dist/index.mjs:72:16)
 ⁃ at async Server.toNodeHandle ([REDACTED]/node_modules/h3/dist/index.mjs:2301:7)

[CAUSE]
Error {
  stack: 'Cannot set headers after they are sent to the client\n' +
  '    at ServerResponse.setHeader (node:_http_outgoing:655:11)\n' +
  'at sendRedirect ([REDACTED]/node_modules/h3/dist/index.mjs:782:18)\n' +
  'at Object.handler ([REDACTED]/server/routes/index.js:6:1)\n' +
  '    at runNextTicks (node:internal/process/task_queues:60:5)\n' +
  '    at process.processImmediate (node:internal/timers:454:9)\n' +
  '    at process.callbackTrampoline (node:internal/async_hooks:130:17)\n' +
  'at async file:///[REDACTED]/node_modules/h3/dist/index.mjs:2009:19)\n' +
  'at async Object.callAsync ([REDACTED]/node_modules/unctx/dist/index.mjs:72:16)\n' +
  'at async Server.toNodeHandle ([REDACTED]/node_modules/h3/dist/index.mjs:2301:7)',
  message: 'Cannot set headers after they are sent to the client',
  code: 'ERR_HTTP_HEADERS_SENT',
}

errant citrus Mar 31, 2025, 6:57 PM

#

hmmm yea, I honestly know nothing about that lol I'll see if I can find anything.

tired vault Mar 31, 2025, 6:58 PM

#

Yeah, i'll try later if i can find a fix

errant citrus Mar 31, 2025, 7:04 PM

#

This seemed to fix it for me

export default defineEventHandler(async (event) => {
  if (event.context.user) {
    return await sendRedirect(event, "/account");
  }

  return await sendRedirect(event, "/signin");
});

tired vault Mar 31, 2025, 7:14 PM

#

Yeah, got it aswell, I just moved it into an else. But now (before aswell) the values pop up for a split second and then disappear followed by another error:

errant citrus Mar 31, 2025, 7:16 PM

#

Yea, I think this error is because there is no type defined for the context

#

I think it has something to do with this

import type { Models } from "node-appwrite";

declare module "h3" {
  interface H3EventContext {
    user?: Models.User<Models.Preferences<any>>;
  }
}

#

You can try something like this

const event = useRequestEvent()
const user = event?.context?.user

Instead of doing object destructuring

tired vault Mar 31, 2025, 7:27 PM

#

yeah, at least i dont get an error now.

#

but still the values disappear after the page fully loads

#

And when I logg out I get the following error:

500
User (role: guests) missing scope (account)

at _Client.call ([REDACTED]/esc/node_modules/node-appwrite/src/client.ts:354:9)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.handler ([REDACTED]/esc/server/api/signout.post.js:7:1)
at async file:///[REDACTED]/esc/node_modules/h3/dist/index.mjs:2009:19)
at async Object.callAsync ([REDACTED]/esc/node_modules/unctx/dist/index.mjs:72:16)
at async Server.toNodeHandle ([REDACTED]/esc/node_modules/h3/dist/index.mjs:2301:7)

errant citrus Mar 31, 2025, 7:28 PM

#

really.. hmm.. I'm not running into that issue

tired vault Mar 31, 2025, 7:28 PM

#

could be something with the sessions

errant citrus Mar 31, 2025, 7:28 PM

#

Yea, it looks like your session is being removed for some reason

#

I forked the repo from above and made my changes to it, so maybe you could be missing something?

tired vault Mar 31, 2025, 7:37 PM

#

could be?

tired vault Mar 31, 2025, 8:00 PM

#

Does this make sense? Doesn't this need to be the url of my website?

tired vault Mar 31, 2025, 8:33 PM

#

errant citrus I forked the repo from above and made my changes to it, so maybe you could be mi...

shouln't that work?

errant citrus Mar 31, 2025, 8:34 PM

#

What is the website URL you're using

errant citrus Mar 31, 2025, 8:34 PM

#

tired vault Does this make sense? Doesn't this need to be the url of my website?

Yea, it would be your websites url

tired vault Mar 31, 2025, 8:34 PM

#

Thats event origin => localhost:3000

errant citrus Mar 31, 2025, 8:35 PM

#

I believe it requires a protocol

#

http(s)://

tired vault Mar 31, 2025, 8:35 PM

#

i think it includes http actually

errant citrus Mar 31, 2025, 8:35 PM

#

can you check the console.log?

tired vault Mar 31, 2025, 8:35 PM

#

jep

errant citrus Mar 31, 2025, 8:41 PM

#

does it need to be wrapped in ticks?

#

`${websiteUrl}/api/oauth`

tired vault Mar 31, 2025, 8:42 PM

#

Yes, else the ${} wouldn't work

errant citrus Mar 31, 2025, 8:43 PM

#

alright in the ss it wasn't so just verifying

tired vault Mar 31, 2025, 8:43 PM

#

I even tried with a string directly but that didn't change anything

#

errant citrus Mar 31, 2025, 8:48 PM

#

where is input coming from? Could the invalid URL not even be one of the two you put in but something else?

tired vault Mar 31, 2025, 8:48 PM

#

wym?

#

What input?

errant citrus Mar 31, 2025, 8:49 PM

#

tired vault Mar 31, 2025, 8:50 PM

#

i dont think thats from me, only the "discord" from the provider

#

could it be the admin client not initializing correctly?

#

omg

#

i know why...

#

(my .env)

#

my appwrite.js

#

...

errant citrus Mar 31, 2025, 8:53 PM

#

Whoops
#1355291187484819605 message

tired vault Mar 31, 2025, 8:55 PM

#

yeah. that makes more sense now.

#

errant citrus Mar 31, 2025, 8:55 PM

#

:P

tired vault Mar 31, 2025, 8:55 PM

#

at least the other stuff should be fixed now

errant citrus Mar 31, 2025, 8:56 PM

#

Cool beans, glad you're making some headway

tired vault Mar 31, 2025, 8:56 PM

#

okay. i'm officially loosing my mind.

errant citrus Mar 31, 2025, 8:56 PM

#

So you authenticated and now the context is empty of user data?

tired vault Mar 31, 2025, 8:56 PM

#

the session is instantly clearing again

#

joe13

errant citrus Mar 31, 2025, 8:57 PM

#

can you see what is triggering that?

tired vault Mar 31, 2025, 8:58 PM

#

As soon as the page fully loads the content disappears

#

oohh

#

#

but that kind of proofs the exact opposite behavior

#

it's changing somewhere on the client for some reason. for the server it's still the old value tho

errant citrus Mar 31, 2025, 9:03 PM

#

What does your code for this page loo like

tired vault Mar 31, 2025, 9:04 PM

#

<!-- pages/account.vue -->
<script setup>
const event = useRequestEvent()
// console.log(event?.context)
const user = event?.context?.user
</script>

<template>
    <ul>
        <li>
            <strong>Email:</strong> {{ user?.email }}
        </li>
        <li>
            <strong>Name:</strong> {{ user?.name }}
        </li>
        <li>
            <strong>ID: </strong> {{ user?.$id }}
        </li>
    </ul>
    <form method="post" action="/api/signout">
        <button type="submit">Log out</button>
    </form>
</template>

#

the console log gives me the right user info tho

tired vault Mar 31, 2025, 9:08 PM

#

errant citrus What does your code for this page loo like

I don't know what exacly is going on here. but imma go to bed now. Its like 11pm rn. I'll try again tomorrow. Thanks tho!

#

Bedge

errant citrus Mar 31, 2025, 9:10 PM

#

try this

<script setup>
const event = useRequestEvent();
const user = useState("user", () => event?.context?.user);
</script>

<template>
    <ul>
        <li>
            <strong>Email:</strong> {{ user?.email }}
        </li>
        <li>
            <strong>Name:</strong> {{ user?.name }}
        </li>
        <li>
            <strong>ID: </strong> {{ user?.$id }}
        </li>
    </ul>
    <form method="post" action="/api/signout">
        <button type="submit">Log out</button>
    </form>
</template>

tired vault Apr 1, 2025, 3:43 PM

#

errant citrus try this ```ts <script setup> const event = useRequestEvent(); const user = use...

Works after reloading the page, but not after loading from the oauth.get page directly

tired vault Apr 3, 2025, 8:18 PM

#

errant citrus try this ```ts <script setup> const event = useRequestEvent(); const user = use...

Any ideas?

errant citrus Apr 3, 2025, 8:29 PM

#

Sorry I hadn't had the opportunity to look more into it

#

I'm not personally able to recreate the behavior you're experiencing so I'm not sure the best thing to do

#

Do you have any sort of error logs or anything?

tired vault Apr 3, 2025, 8:39 PM

#

Seems like there is no error at all. The user object just returns undefined until reloading.

errant citrus Apr 4, 2025, 12:13 AM

#

Hmm it seems nuxt isn’t taking into account the cookie values set until after reload. I’m not sure why, can you check in the middleware when it’s getting the user if that’s null or undefined? Maybe a console log?

tired vault Apr 4, 2025, 7:02 PM

#

errant citrus Hmm it seems nuxt isn’t taking into account the cookie values set until after re...

I dont quite understand. Where exacly should I put the log?

// server/middleware/auth.js
import { createSessionClient } from "../lib/appwrite";

export default defineEventHandler(async (event) => {
    const { account } = createSessionClient(event);

    try {
        event.context.user = await account.get();
    } catch (error) {}
});

errant citrus Apr 4, 2025, 7:52 PM

#

yea here log account and see if it's just undefined?

tired vault Apr 4, 2025, 8:32 PM

#

Before reload:

auth middleware Account {
  client:
   _Client {
     config:
      { endpoint: '[REDACTED - APPWRITE_ENDPOINT]',
        selfSigned: false,
        project: '[REDACTED - APPWRITE_PROJECT]',
        key: '',
        jwt: '',
        locale: '',
        session: '',
        forwardeduseragent: '' },
     headers:
      { 'x-sdk-name': 'Node.js',
        'x-sdk-platform': 'server',
        'x-sdk-language': 'nodejs',
        'x-sdk-version': '15.0.1',
        'user-agent': 'AppwriteNodeJSSDK/15.0.1 (win32; x64) Node.js/v20.19.0',
        'X-Appwrite-Response-Format': '1.6.0',
        'X-Appwrite-Project': '[REDACTED - APPWRITE_PROJECT]' } } }

After reload:

        auth middleware Account {
  client:
   _Client {
     config:
      { endpoint: '[REDACTED - APPWRITE_ENDPOINT]',
        selfSigned: false,
        project: '[REDACTED - APPWRITE_PROJECT]',
        key: '',
        jwt: '',
        locale: '',
        session:
         'eyJpZCI6IjY3ZTZmMTVlOTY4NjVlYTZkNjZmIiwic2VjcmV0IjoiMTdlYjZiOTcxMGIzNTY5OTVhOWRlZjQzMmYwOTIyODhhNzYxNDZkZDk0NzIyNjU3ZThmOGQ0ZDgyZDk4NTVhODUxNmJlOWNlZWM5NTFhOWQwOWMzNGIwMTA3OGY0NGFhNmZmNDU3MzRhZjgwM2EyOTI5MDJlYTQ0ZDcyZjg4MWYzOTcxYTVlNTJkNGEwOTZhNmMzMDA4ZDdkZTQ4OWZkOWQ5MGJjOWNkZjI2NGJiMDcyMzQ2NjdlMTFmY2I2ZDZjNWMzYWJjMGNmZjZhMWU5NTk5MGE2ZTU1NGNlNWYzZDc4OTBkN2NlNjY5YzJkMjgwZWQ1NDY4YjI2YWUzYWRjZCJ9',
        forwardeduseragent: '' },
     headers:
      { 'x-sdk-name': 'Node.js',
        'x-sdk-platform': 'server',
        'x-sdk-language': 'nodejs',
        'x-sdk-version': '15.0.1',
        'user-agent': 'AppwriteNodeJSSDK/15.0.1 (win32; x64) Node.js/v20.19.0',
        'X-Appwrite-Response-Format': '1.6.0',
        'X-Appwrite-Project': '[REDACTED - APPWRITE_PROJECT]',
        'X-Appwrite-Session':
         'eyJpZCI6IjY3ZTZmMTVlOTY4NjVlYTZkNjZmIiwic2VjcmV0IjoiMTdlYjZiOTcxMGIzNTY5OTVhOWRlZjQzMmYwOTIyODhhNzYxNDZkZDk0NzIyNjU3ZThmOGQ0ZDgyZDk4NTVhODUxNmJlOWNlZWM5NTFhOWQwOWMzNGIwMTA3OGY0NGFhNmZmNDU3MzRhZjgwM2EyOTI5MDJlYTQ0ZDcyZjg4MWYzOTcxYTVlNTJkNGEwOTZhNmMzMDA4ZDdkZTQ4OWZkOWQ5MGJjOWNkZjI2NGJiMDcyMzQ2NjdlMTFmY2I2ZDZjNWMzYWJjMGNmZjZhMWU5NTk5MGE2ZTU1NGNlNWYzZDc4OTBkN2NlNjY5YzJkMjgwZWQ1NDY4YjI2YWUzYWRjZCJ9' } } }

#

seems like the createSessionClient doesn't even have anything in the event at that time

#

but oauth.get.js does.

tired vault Apr 4, 2025, 8:58 PM

#

This makes no sense at all....

errant citrus Apr 4, 2025, 10:04 PM

#

id suspect it's because it is not aware of the new cookie that was set on the server

#

i don't know what the fix would be

tired vault Apr 4, 2025, 10:28 PM

#

clould be..

tired vault Apr 4, 2025, 10:28 PM

#

errant citrus I'll forward this along to the appwrite team so they can be aware of the issues ...

did you hear anything from the appwrite devs?

errant citrus Apr 4, 2025, 10:40 PM

#

tired vault did you hear anything from the appwrite devs?

no /:

#Discord OAuth on Nuxt