Back

Help in Implementing OAuth Authentication with Appwrite in Next.js 15 + Types with SSR and Cookies

  • 1
  • Web
Hyrum
6 Nov, 2024, 15:23

I'm working on implementing OAuth authentication in my Next.js application using Appwrite as the backend

Technical Environment: Next.js (lastest) Appwrite (lastest) Authentication Type: OAuth (provider: Google/GitHub/etc.) Node-appwrite/appwrite The problem is that node-appwrite doest have oauth logun and I want to store the cookies as well I want to use react-query to store user data

TL;DR
Developers are seeking assistance in implementing OAuth Authentication with Appwrite in a Next.js 15 application, including SSR and Cookies. To address the issue of storing OAuth cookies, a relevant code snippet was provided which involves setting up a callback for OAuth redirect to obtain the session and store it in the cookie. Furthermore, there was mention of working with OAuth in Next.js SSR, using Appwrite Cloud, and being a Pro user. For Node-appwrite OAuth login assistance, a resource link was shared. Solution: The key challenge is obtaining the token when using Appwrite Cloud as a Pro user and how to store OAuth cookies. The tutorial linked
Kenny
6 Nov, 2024, 15:36
Kenny
6 Nov, 2024, 15:36

You can check out this tutorial for oauth in nextjs ssr

https://appwrite.io/docs/tutorials/nextjs-ssr-auth/step-7

Hyrum
6 Nov, 2024, 15:39

Thanks!!

Hyrum
6 Nov, 2024, 15:44

but How to sotre the cookies of the OAuth?

Hyrum
6 Nov, 2024, 15:48

TYhis its a reference ``` app.get('/oauth/success', async (req, res) => { const account = new Account(adminClient);

TypeScript
// Get the userId and secret from the URL parameters
const { userId, secret } = req.query;

try {
    // Create the session using the Appwrite client
    const session = await account.createSession(userId, secret);

    // Set the session cookie
    res.cookie('session', session.secret, { // Use the session secret as the cookie value
        httpOnly: true,
        secure: true,
        sameSite: 'strict',
        maxAge: sesion.expire
        path: '/',
    });

    res.status(200).json({ success: true });
} catch (e) {
    res.status(400).json({ success: false, error: e.message });
}

});``` but the main problem its how to get the Token if Im using Appwrite Cloud and Im a Pro user

Kenny
6 Nov, 2024, 15:51

Go ahead and checkout the tutorial I linked you.

You'll need to setup a callback for the oauth redirect to get the session and store it in the cookie.

https://appwrite.io/docs/tutorials/nextjs-ssr-auth/step-7#oauth-callback

Hyrum
6 Nov, 2024, 19:11

Cool, Thanks

Hyrum
6 Nov, 2024, 19:37

Hmm, This its unexpected Error fetching user: AppwriteException: [email protected] (role: applications) missing scope (account) at _Client.call (turbopack://[project]/node_modules/node-appwrite/src/client.ts:347:8)

Kenny
6 Nov, 2024, 19:38

to use account.get you need to create a new client that sets the users session on the client

Hyrum
6 Nov, 2024, 19:45
TypeScript
    try {
        const { account } = await createAdminClient();
        // @ts-expect-error - Next.js 15 types issue
        const sessionId = await cookies().get("auth_session")?.value;

        if (!sessionId) {
            return null;
        }

        const user = await account.get();
        return user;
    } catch (error) {
        console.error('Error fetching user:', error);
        return null;
    }
} ``` This its my code its good?
Hyrum
6 Nov, 2024, 19:51

I need to create a new client

Hyrum
6 Nov, 2024, 19:51

?

Kenny
6 Nov, 2024, 20:01

Yes, you'll need an admin client and a session client.

Kenny
6 Nov, 2024, 20:01

The session client acts on behalf of a user.

Kenny
6 Nov, 2024, 20:02

I highly recommend looking at this tutorial Guille and I have provided.

https://appwrite.io/docs/tutorials/nextjs-ssr-auth/step-3

Hyrum
6 Nov, 2024, 20:08

Thanks so much!!, Im still new in appwrite

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