Nuxt•5mo ago

Needs help with better-auth intergration in Nuxt

I’m quite new to Nuxt… Did anyone here intergrate better-auth with Nuxtjs and drizzle orm/sqlite already? Especially with Google OAuth2. I followed the official better-auth’s guide for Nuxt already, but I still cannot implement the Google OAuth, it came with weird error likes HTTP 401 and stuffs. I tried to seek helps from the official better-auth’s Discord server but no one answered, so I reached out the Nuxt community. The screenshots include the error message, and the code snippets. I would be grateful if you can help me out with this error, or point out what I was wrong. Show me how to implement it.

38 Replies

kapa.ai•5mo ago

Hi @sh1ro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources provided do not contain any information about integrating the better-auth library with Nuxt, Drizzle ORM, or Google OAuth2. The sources cover authentication in Nuxt using other solutions such as nuxt-auth-utils, and provide examples for session management, route protection, and UI components for authentication forms, but there is no mention of better-auth or its integration steps, error handling, or troubleshooting for Google OAuth2. If you are open to alternatives, the official Nuxt documentation recommends using nuxt-auth-utils for authentication, which supports multiple OAuth providers and can be integrated with databases like Drizzle or SQLite. You can find a full example and next steps in the Nuxt docs, including OAuth provider setup and database integration, which might help you achieve similar functionality to what you want with better-auth Sessions and Authentication. For more specific help with better-auth, you might need to consult its official documentation or community, as the Nuxt documentation and community resources do not cover this integration. If you have code snippets or error messages, sharing them in the Nuxt community (Discord, GitHub Discussions) might help others assist you more effectively, as suggested in the Nuxt community help guidelines Getting Help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@503207912521334796> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Hugo•5mo ago

https://github.com/HugoRCD/nuxt-better-auth

GitHub

GitHub - HugoRCD/nuxt-better-auth: A demo of using BetterAuth with ...

A demo of using BetterAuth with Nuxt and PostgreSQL - HugoRCD/nuxt-better-auth

White Cat•5mo ago

Hello, Nice to meet you. @sh1ro No worry. Even if it's new technology, we don't need to worry about that. We can learn about that and we can have exp via collaboration.

sh1roOP•5mo ago

Not quite fit my need. Okay? I’m gonna send the repo.

sh1roOP•5mo ago

here

GitHub

GitHub - Coder-Blue/helium-travel: A travel log app built with Nuxt

A travel log app built with Nuxt. Contribute to Coder-Blue/helium-travel development by creating an account on GitHub.

White Cat•5mo ago

cool what's this?

sh1roOP•5mo ago

Not quite finished. The description explains it all, my first project with Nuxt to learn about it.

WiFi Plug•5mo ago

https://www.youtube.com/watch?v=DK93dqmJJYg

Syntax

YouTube

Full Stack App Build | Travel Log w/ Nuxt, Vue, Better Auth, Drizzl...

In this video, CJ builds a Full Stack application with Nuxt / Vue / TypeScript that allows users to keep track of the places they have visited and view them on a map. View the LIVE App | https://nuxt-travel-log.vercel.app/ View the Code | https://github.com/w3cj/nuxt-travel-log Project Board Creator Tool | https://github.com/w3cj/travel-log-git...

sh1roOP•5mo ago

Stuck at the OAuth

WiFi Plug•5mo ago

this is a good tutorial he uses better auth and links his repo in the description I followed it and added oauth easily

sh1roOP•5mo ago

Yeah, that’s the thing I followed.

WiFi Plug•5mo ago

oh what error do you get then i added google oauth to it

sh1roOP•5mo ago

You added the Github?

White Cat•5mo ago

WiFi Plug•5mo ago

nah its his github repo

sh1roOP•5mo ago

Can you look at the screenshots? Idk any of it means anything? Do you have to set anything properly in your Google Cloud Console?

WiFi Plug•5mo ago

yeah I added localhost as the redirecturl but not sure if thats your issue

White Cat•5mo ago

ok I used google cloud console

WiFi Plug•5mo ago

usually that would show an error about incorrect redirect url when youre on the google page are you using csrf like he does in the tutorial?

  async function signInSocial(provider: SocialProvider, callbackURL = "/dashboard") {
    const { csrf } = useCsrf();

    await authClient.signIn.social({
      provider,
      callbackURL,
      errorCallbackURL: "/error",
      fetchOptions: {
        headers: {
          "csrf-token": csrf,
        },
      },
    });
  }

  async function signInSocial(provider: SocialProvider, callbackURL = "/dashboard") {
    const { csrf } = useCsrf();

    await authClient.signIn.social({
      provider,
      callbackURL,
      errorCallbackURL: "/error",
      fetchOptions: {
        headers: {
          "csrf-token": csrf,
        },
      },
    });
  }

this is my socialsignin function in the auth store not certain if you need csrf but potentially you might

sh1roOP•5mo ago

Do you have your repo? Not quite, I just came to the implementing the Github OAuth part yesterday.

WiFi Plug•5mo ago

normal signup works via email for you right?

WiFi Plug•5mo ago

thats my cloud console setup

sh1roOP•5mo ago

I don’t use email auth. I only try to add Google OAuth. Github OAuth worked so I try with Google. And it didn’t work?

sh1roOP•5mo ago

This thing makes my head hurt

WiFi Plug•5mo ago

ah okay if github worked that's good, i checked your repo but i don't think you uploaded the newest stuff it's missing the server folder entirely

sh1roOP•5mo ago

Because I only reached to Issue #12. I didn’t push yet. Wait I have to add that Authorized JavaScript origins setting too?

WiFi Plug•5mo ago

I believe you need both yes and once you update it might take some time to update like a few hours potentially but i think usually its fast

sh1roOP•5mo ago

I only added the “Authorized redirected URIs” as the better-auth guides. Lemme try

WiFi Plug•5mo ago

might not make a difference if you didn't see an error on the google signin screen though

sh1roOP•5mo ago

Yup I added Nothing changed Guys I re-added Github And it doesn't work I think it's the Nuxt API endpoint server @WiFi Plug or about the turso server?

WiFi Plug•5mo ago

not sure, i tested mine and it works with turso too locally he linked his project fully in github btw i would recommend you follow it exactly as he did first and at the end start to play with adding different oauth providers etc imo since there were a few updates people recommend in the package.json and small fixes in the comments so its best to get the default working first better way to learn imo that way if you're having bugs pop up already harder to know if you introduced the bug or just packages are out of date etc

sh1roOP•5mo ago

So what should I do now? Nothing works…

WiFi Plug•5mo ago

try to get your code back to his example without modifications atm then check the github issues incase anything is relevant and the youtube comments. maybe a package needs to be updated or something

sh1roOP•5mo ago

I just checked the better-auth Github issues. There is a guy who experiences the same problem/bug as mine in the latest version of better-auth in Nuxt.

WiFi Plug•5mo ago

Ah okay, did they mention a fix or not? You can downgrade to an older version of better auth or nuxt and see if that fixes it for now

sh1roOP•5mo ago

I'm trying to downgrade it But still same error Nuxt 4 has problems with better-auth? Maybe.

Gaming

Programming

Needs help with better-auth intergration in Nuxt

Did you find this page helpful?