Discord Oauth2 Example

[onyx matrix]

Hello! Just enquiring, does anyone here have a Discord Oauth example for NextJS?

[rugged gulch]

Hey there!
OAuth is supposed to be very simple to integrate.

https://appwrite.io/docs/client/account?sdk=web-default#accountCreateOAuth2Session

[wise cargo]

With appwrite specifically or Next App?

[rugged gulch]

If you could explain what issue you are facing, I'd be happy to help 😄

[onyx matrix]

Im kind of new to this, as I’ve always just used Express and Passport, so I’m kind of a bit clueless sorry 😂

[onyx matrix]

@rugged gulch Hey there, very sorry to bugger (ping) you, however I'm experiencing this issue with the below code:

const getCurrent = function() { 
    try {
        account.getSession("current").then(function(res) {
            console.log(res)
            return res;
        }).catch(function(e) {
            console.log(e)
            return null;
        })
    } catch (e){
        console.log(e)
        return null;
    }
}

[rugged gulch]

@onyx matrix according to the screenshot of the error, User (role: guests) missing scope (account) means that there is no active session.

[onyx matrix]

Yes there is not, should my try...catch not catch it?

[rugged gulch]

try this

catch(e) {
  if (e instanceof AppwriteException) {
    console.log(`Appwrite Error: ${e.message}`);
  } else {
    console.log(`Error: ${e}`);
  }
}

[rugged gulch]

I just noticed tgat you have two catch statements. One for the .then and one for the try. Have you tried using await instead of then?

So something like:

const getCurrent = async function() { 
    try {
        await account.getSession("current");
    } catch(e) {
        if (e instanceof AppwriteException) {
          console.log(`Appwrite Error: ${e.message}`);
        } else {
            console.log(`Error: ${e}`);
        }
    }
}

I might have used async in the wrong place cuz I never declare functions like this, so just make sure about that 😅

Try this and lmk

[onyx matrix]

Do I return anything?

like return the getSessipn promise

It logs that error, and my result in the console 💀

const getCurrent = async function() { 
    try {
        let res = await account.getSession("current")
        console.log(res)
        return res
    } catch(e) {
        if (e instanceof AppwriteException) {
        console.log(`Appwrite Error: ${e.message}`);
        return null
        } else {
        console.log(`Error: ${e}`);
        return null
        }
    }    
}

[rugged gulch]

Have you tried rebuilding the code?

Like stop the dev build, and re run it

worth a shot lol

[onyx matrix]

lol nope I haven't

[alpine jetty]

That measn there is not any logged in user

I don't understand what's the problem

[rugged gulch]

Correct, but there is a session object that gets logged in the console as well 🧐

Or am I missing something?

[onyx matrix]

Let me rebuild

[alpine jetty]

@onyx matrix Is that being executed client or server-sided?

[rugged gulch]

Rebuild -> Try to login with OAuth again

[alpine jetty]

But as said, is that being executed client sided?

[rugged gulch]

Yes please answer this as well

[onyx matrix]

Ummmm

I don't know how to answer that 😂

[rugged gulch]

Did you create an Appwrite Cloud Function for this? Or are you doing this in your frontend code?

[onyx matrix]

In my front end code

[rugged gulch]

Okay so that means it's client-side. Are you using server-side rendering?

[onyx matrix]

Yes I am 👍

[rugged gulch]

In that case, disable SSR and try again

make it a client side component. with SSR on you will have to manage cookies on both client and server sides.

[onyx matrix]

Where do I disable SSR?

Oooo

[rugged gulch]

Just add 'use client' to the top of your file. You're using nextjs right?

[onyx matrix]

Server side rendering

💀

Yes I am using "use client"

[rugged gulch]

in that case, can you share your full code?

seems weird...

[onyx matrix]

Do I add "use client" to every frontend file?

I think I just added it to my page.js and not my component JSX file

[alpine jetty]

Yes

Try that

[onyx matrix]

So, I login, but it says "null"

// Navbar.jsx (component)
const user = await appwrite.getCurrent()
console.log(user)

// appwrite.js
const getCurrent = async function() { 
    return new Promise(async function(resolve, reject) {
        try {
            let res = await account.getSession("current")
            resolve(res)
        } catch(e) {
            if (e instanceof AppwriteException) {
            console.log(`Appwrite Error: ${e.message}`);
            resolve(null)
            } else {
            console.log(`Error: ${e}`);
            resolve(null)
            }
        } 
    })   
}

[rugged gulch]

I assume getCurrent holds the code you sent above right?

[onyx matrix]

edited

But it creates the User

[rugged gulch]

Oh

Okay

Can you click on the user in the dashboard and see if there's any active sessions?

[rugged gulch]

okay so the session exists. can you try doing account.get() instead of getCurrent and see what happens?

[onyx matrix]

user = await appwrite.account.get()

I’m going to sleep now, is it okay if you could list possibilities that could solve this issue for me to wake up to?

Or even a decent example that includes checking if a user is logged in

[rugged gulch]

With OAuth, user auth is a tiny bit different. So register/login is handled by createOAuth2Session - if there is a user with same email, they get logged in. If the email doesn't exist in the project already, then a new account is created. I'm not a 100% sure about this but I don't think the user is logged in automatically after a new account is created (i might be wrong).

What you can do is call createOAuth2Session with an await. Once they login with the provider and they're back on your app, run account.get(). If it returns an object, the session is active. If it throws the error you keep getting, there is no session on the device.

[little totem]

This looks like it's running server side 🧐

[hoary gyro]

@little totem I've sorted this for him.

Turns out i sent him my server-side wrapper for Next JS instead of client-side.

[onyx matrix]

Breh

[alpine jetty]

But why running appwrite server sided for client side?

[onyx matrix]

So I'm doing this now client-sided

But on the bottom right it says error

[little totem]

Where are you creating the session?

[onyx matrix]

lib/appwrite.ts, I have an API manager:

  createDiscordLogin: () => {
    if (!api.sdk) {
      api.provider();
    }

    return api.account.createOAuth2Session(
      'discord',
      `${process.env.NEXT_PUBLIC_APP_URL}`,
    )
  }

But even without being logged in the issue still happens, I learnt last night that it was because the session doesn't exist, but my try-catch still causes a run-time issue when being used client sided.

[little totem]

Is your Appwrite endpoint a subdomain of your app's domain?

[onyx matrix]

I'm using local host

But no it's just http://localhost:3000

[little totem]

For Appwrite too or are you on cloud?

[onyx matrix]

I'm on cloud

I'm new to thus stuff so ye lol

[little totem]

Right so the Appwrite cookie will be considered a 3rd party and it could be blocked by your browser. To make sure its not blocked, you need to use a custom domain for Appwrite. See https://appwrite.io/docs/custom-domains

[onyx matrix]

Is there a way I could check to see if it's blocked?

[little totem]

I'm not sure. There might also be a way to allow 3rd party cookies

[onyx matrix]

Just searching it up now

[little totem]

Maybe ya. I never tested this so I don't know much

[onyx matrix]

Would port forwarding it to NGROK allow it?

Even using Firefox, it's returning that error

Oh oh is that a bad thing? @little totem

[little totem]

Only if your Appwrite endpoint is a sub domain of your app

[little totem]

Firefox could be blocking 3rd party cookies too

[little totem]

Appwrite doesn't detect a session

[onyx matrix]

So what exactly do I got to do?

Is there a legitimate theory as to why this is happening though?

[little totem]

The 3rd party cookie problem...

[onyx matrix]

@little totem Good news, it stores my session now:

[onyx matrix]

So the only issue I am having now, is the login button still displaying when they are logged in, my theory was:

• The request is too slow, as the page loads and then it logs.

    const [isLoggedIn, setIsLoggedIn] = useState(false)

    useEffect(function() {
        api.getCurrentSession().then((data) => {
            console.log(data)
            if (data.$id) return setIsLoggedIn(true);
        });
    }, []);

[little totem]

What did you do to get it working?

[little totem]

Could be, yes

[onyx matrix]

My ENV wasn't saved lol

[onyx matrix]

Is there a way to fix it?

[onyx matrix]

ouch that fastness

[alpine jetty]

Does it work now?

[onyx matrix]

Unfortunately no, the Appwrite request on the client-side is taking about 1 second longer than the rendering of the page.

[alpine jetty]

That's expected, it takes a bit more time to make and get the result

But usually It's only the first page. Others should load quicker

[onyx matrix]

Ye it is expected I guess as of course it's an API request , but is there a way to slow down the rendering of the page as well?

Or an alternative to what I am trying?

I'm just trying to see if a user has an active oauth session

[onyx matrix]

It's getting annoying lol

I guess we're getting there 😂 , that little switch

[alpine jetty]

You could make a small loader where the button is and show it prior to the load, after the appwrite data has been fetched, then you show the corresponding button

Probably it's possible to load it with the page, but not sure how this can be implemented (never used nextjs)