Back

Vue authentication

  • 0
  • Auth
  • Web
  • Cloud
Nima
15 Apr, 2024, 14:43

Hello there,

I'm working on a vue+nuxt web app and I can't handle the authentication. I have a couple of issues:

  1. The documentation for the SSR auth for nuxt is not working (the part where it is writtenuseEvents. So I wanted to log in with vue but when the page refreshes the user is logged out. I tried to use account.getSession('current') and also const session = await account.get() but it gets the user with a delay Also I receive this warning in the console Third-party cookie will be blocked. Learn more in the Issues tab. I have to mention I created a user store with pinia and I don't know if this is the right way to do so or if I should create a file in utils or a composable.
  2. I couldn't find a good explanation about how to implement sign in with google or apple. I appreciate if you have a demo or you know a doc or post about it.

Here is the store I created:

TypeScript
export const useUserStore = defineStore('user', () => {
  const { account } = useAppwrite()
  const currentUser = ref(null)
  const error = ref(null)

  async function init() {
    try {
      // const { user } = await account.getSession('current')
     const user = await account.get()

      if (user)
        currentUser.value = user
    }
    catch (err) {
      error.value = `Failed to fetch current session: ${err.message}`
      throw err
    }
  }

  init()

// other functions for signup, login and logout
})

Additionally, I always receive this error and I found no solution for that

TypeScript
 [unhandledRejection] User (role: guests) missing scope (account)```


Ultimately, I'd appreciate it if you can help me about the structure of how to use appwrite with vue+nuxt. what stuff I should do client side and what server side.
Thanks in advance
TL;DR
Developers are having issues handling authentication in their Vue + Nuxt web app, experiencing errors with login sessions and third-party cookies. They also need guidance on implementing Google or Apple sign-ins and utilizing Appwrite with Vue + Nuxt. A potential solution to the unhandled rejection error suggests checking the user's scope. For better structure, it's recommended to check the Appwrite documentation for incorporating client-side and server-side functionalities properly.
ideclon
15 Apr, 2024, 17:13

Are you on Cloud or Self-hosted?

Nima
16 Apr, 2024, 07:05

Cloud

ideclon
16 Apr, 2024, 15:13

Cloud is currently on Appwrite 1.4. SSR is only available from Appwrite 1.5

ideclon
16 Apr, 2024, 15:13

As for Google sign in, see if this helps? https://youtu.be/tgO_ADSvY1I

Nima
16 Apr, 2024, 16:01

Thanks, I watched it today and fixed this problem. But I still get this error either with email login or Google login

TypeScript
[unhandledRejection] User (role: guests) missing scope (account)
ideclon
16 Apr, 2024, 17:34

So that error means you’re not logged in. Assuming the Google login completed successfully, this probably means you’ll need to use a Custom Domain

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more