I've been working on one open source project where NextJS + Appwrite is used. I want to integrate SignIn with Github in that application. On clicking signin with github, its not redirecting to the URL I am expecting instead it refreshes and stays on same page. In console, it shows 401 unauthorized and "User (role: guests) missing scope (account)". I have attached the screenshot for the reference.
Code:
auth.api.ts
const loginWithGithub=async()=>{
try {
const userData = account.get();
console.log(userData);
account.createOAuth2Session(
"github",
"http://localhost:3000/feed",
"http://localhost:3000"
)
} catch (error) {
console.log(error);
}
}
Client side
<button
className="px-4 py-2 flex flex-row text-sm md:text-base rounded border text-black bg-white transition duration-300 ease hover:bg-secondary hover:text-white items-center"
onClick={async(e) => {
e.preventDefault();
e.stopPropagation();
await loginWithGithub();
router.push('/feed');
}}
>
<span>Login with Github</span>
</button>
TL;DR
The developer is trying to integrate "Sign in with Github" functionality into their NextJS + Appwrite application, but they are facing issues. After clicking the button, instead of redirecting to the expected URL, the page refreshes and stays the same. The developer checked the console and found a 401 unauthorized error with the message "User (role: guests) missing scope (account)". They provided the code they are using for authentication.
Solution: It seems that the user lacks the necessary account scope for authentication. The developer should make sure to check the Appwrite dashboard and ensure that the correct scope is assigned to the user. Additionally,
