articles/oauth-api-and-next-app-in-5-mins

[giscus[bot]]

articles/oauth-api-and-next-app-in-5-mins

Introduction Nowadays, almost every single application allows OAuth integrations so users don't have to go through the boring and long registration flows…

https://tiagomichaelsousa.dev/articles/oauth-api-and-next-app-in-5-mins

[m7mdcc]

Amazing Tuts , Could you pleas change your code color from green to someting else next time?

[tiagomichaelsousa]

Hey @m7mdcc 👋

Are you using the white theme? I have to find a better variant for the green you are right! I will have a look into some themes to see which suits the best for the white theme 🤗

Thank you for the feedback 🙏

[diazsasak]

Good article.

so the authentication is session based? we don't need to send auth token to nextjs for further api call?

[tiagomichaelsousa]

Yep, it's a cookie based authentication. The good thing is that since we are using sanctum you can still develop your api and it will work with token based authentication as well 😎🚀

[diazsasak]

got it. How to check if user is logged in or not on our SPA? for example if logged in show logout button else show login button. thanks

[tiagomichaelsousa]

Hey @diazsasak, sorry for the late reply!

You have an /me endpoint if this returns you a 403 it means that the user isn't authenticated 😊

[diazsasak]

@tiagomichaelsousa thank you Tiago. I really appreciate it

[tiagomichaelsousa]

In the frontend you can use the cookie base authentication by configuring your fetcher and add the withCredentials: true (have a look here

With that, every request will try to send the cookie in the request and if you want to know if the user is authenticated or not you can make a request to /api/user (depending on the route that you defined in your backend) to get the current authenticated user as it is defined here.

Feel free to dig and have a look around this repo, everything is configured to run out of the box 🔥

[diazsasak]

thank you @tiagomichaelsousa , the code example is neat

[ShaungBhone]

Thank you so much for this rare blog. But I'm trying to login with twitter. I got this error.
Received HTTP status code [401] with message "{"errors":[{"code":32,"message":"Could not authenticate you."}]}" when getting temporary credentials.

[tiagomichaelsousa]

Hello there 👋

I think the problem is related with the OAuth version that you are using... What's the value that you pass to the Socialite facade? twitter or twitter-oauth-2

You should probably use the oauth2 and for that you need to add the following

Socialite::driver('twitter-oauth-2')->redirect();

and 

$user = Socialite::driver('twitter-oauth-2')->user();

if you followed the blog post you just need to add the following line to the app/Enums/OAuthProviderEnum.php file

case TWITTER = 'twitter-oauth-2';

and when you are accessing the url it should be something like `/login/twitter-oauth-2``

Let me know if it helped you ✌️

[ShaungBhone]

Thank you for your reply. I already fixed this.

[tiagomichaelsousa]

Welcome 😎