Next.js 13 Full Stack E-commerce App #15 | Protect API Endpoints, Pass Next Auth Token with Axios
Вставка
- Опубліковано 27 бер 2023
- Git Repo Link:
github.com/ghulamabbas2/buyit...
Checkout my In-Depth Next.js Masterclass on Udemy Courses:
www.udemy.com/course/nextjs-b...
Next.js 13 Authentication with Next-Auth:
• Next.js Authentication...
================================================================
⚙️ Gadgets I use for Recording:
💻 Laptop - Macbook PRO M1 - 16/512
amzn.to/4eUqrSe
🎤 MIC - Samson Technologies Q2U USB/XLR Dynamic Microphone
amzn.to/3W9Z4wl
🖱️Mouse - Logitech G402 Gaming Mouse Hyperion Fury USB, Black
amzn.to/3RY4xUy
⌨️ Keyboard - Logitech K380 Multi-Device Bluetooth Keyboard
amzn.to/3RY4Fn0
🖥️ Monitor - UltraSharp 24-Inch Screen Led-Lit Monitor (U2419H)
amzn.to/4bxidN6
================================================================
In this tutorial video, we continue building a full-stack e-commerce application using Next.js 13. Specifically, we focus on protecting API endpoints and passing Next Auth tokens with Axios.
First, we start by exploring the importance of protecting API endpoints and the various methods available for doing so. We then walk through the steps required to set up protected endpoints using the Next.js API routes and middleware.
Next, we delve into the process of passing Next Auth tokens with Axios. We explain how to retrieve and use the Next Auth token within our application, as well as how to configure Axios to include the token in each request.
By the end of this video, you will have a clear understanding of how to protect API endpoints and pass Next Auth tokens with Axios in a Next.js 13 e-commerce application. So, join us and enhance your web development skills!
Thanks for watching, and let's get started!
Man I love this series, only downsight is that I will have to wait weeks untill all videos of the series are online. Love this project and what you doing!
feel the same man..i wish we can get all videeos ready asap
@@dolapoajayi2156 Same, this pace is too slow, a new video should come out at least every 3 days. Other than that, they are good.
Thanks, Abbas for the series
Dude, this help me a lot i was stuck with this, thanks!!!!
i love this series. i have learn a lot, thank you
I appreciate again Mr Abbas thanks
Can't thank you enough for this!
Thanks once more mate.
Hi, Can you use the Axios interceptors to set the cookies before requesting the API route and write all API calls for frontend in single file on frontend part?
I want video on it, please
When on second page and then applying a filter on the products the page will remain on page 2 with the applied filter (where there are no products anymore on page 2, but there are on page 1) How can you reset the page count without affecting the pagination method so after applying a filter with a checkbox the page is reseted to 1 or completely removed?
You can check if filteredProductsCount is less than resPerPage, set page value to 1.
Hi Sir, how you are creating new address without passing jwt token in axios post request (in addNewAddress function)? where as your api end point is protected @Coding With Abbas
We don't have to pass it there, Next will take care of that.
@@codingwithabbas sir I also have tried to remove isAuthenticated middleware from next connect post handler but the app is throwing error bocz we are getting user id from that middleware in order to pass it to address as a user ref
@@codingwithabbas actually the main problem is here i am unable to pull the cookie jwt token from next/header in client side component. Because we have to pass the jwt token to every axios request in our case for authentication otherwise the server throws an error with 401 unauthorize.
Plz tell me how can I pull the token from cookies in order to pass it in axios config (header)
So if i try to create a new address, i get error [next-auth][error][CLIENT_FETCH_ERROR] in the terminal and in the console 401 ( Unauthorized ).
First of all test the backend endpoint.
@@codingwithabbas I get json response with user data if i go to localhost:3000/api/auth/session. Somehow, I still get [next-auth][error][CLIENT_FETCH_ERROR]
#client_fetch_error undefined {
error: {},
url: 'localhost:3000/api/auth/session',
message: undefined
}, it doesnt let me post error here with links, so i try to put without.
@@codingwithabbas I fixed it, just need to use older version next.js, because now i can also see session in the terminal before it was undefined. 🙂
@@ecosander8529
Can you show me how to fix this version error..i have the same problem..thank you very much
which version did you use?@@ecosander8529
Hello Abbas i don't know by this moment if you can help me ill really appreciate , i have a problem with the middleware i can't get the user in the session when i console log it i got a null . please help me 🙏
Hello, I solved this problem by using in middlewares/auth.js file GetServerSession instead of GetSession.
then I also had to use fetch instead of axios in the app/me.jsx file.
Good job, brother! Have u ever tried to get session object with getServerSession() in api route handler function? Because, currently i cant. When I return getServerSession() in my api root, I get null. Do u know the solution for that?
You need to pass authOptions in the getServerSession() like this:
import { getServerSession } from "next-auth";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
const data = await getServerSession(authOptions);
@@codingwithabbas I know, I passed it already but didnt work. I wanna mention that, I am using latest version of next js which has api routes inside app directory. Could u just try it by yourself and tell me the result? Cause I have been suffering for 3 days looking for a solution, but couldnt find:(
@@tunaralyarzada same for me
@@codingwithabbas plz abbas give us the solution... how can we solve this problem....?
Quick question: how many parts will there be in this series?
Around 30-35
if i do this
const error = new ErrorHandler("Login first to access this route", 401)
console.log(error)
I get this
ErrorHandler: Login first to access this route
at Array.isAuthenticatedUser (webpack-internal:///(api)/./backend/middlewares/auth.js:16:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async C:\Users\boatr\OneDrive\Documents\Testing\buyitnow
ode_modules
ext-connect\dist\commonjs
ode.cjs:57:21 {
statusCode: 401
}
im just gonna do this
if (!session) {
res.status(401).json({
error:"Log in first to access this route"
})
}
router.use(isAuthenticatedUser).post(newAddress); post not working
@@neveriodev350
Hello will you make a travel booking app in your channel like this one with redux it will be great it's a request
I will try, but I can't promise.
const session = await getSession({ req })
i'm not getting session what should i do
What do you get back? Have you logged the session? If yes then what is the result of that.
@@codingwithabbas Sir the error i am getting is not able to be pasted here
@@codingwithabbas error 1st line => [next-auth][error][CLIENT_FETCH_ERROR]
@@mdbadhon5849 did you fix it, because i have same problem and cant fix it. I use Ubuntu.
@@ecosander8529 no bro waiting for reply @Coding With Abbas
I get a 401 error when i add a new address
console.log(session) in the isAuthenticated user and check session is present or not. Also logout and login again.
Hello@@codingwithabbas i'm getting the same issue since 2 days , when i did a console.log(session) in the middleware the session is null . please help me
@codingwithabbas please guide on error [next-auth][error][CLIENT_FETCH_ERROR]. I have tried everything. Any help will be appreciated!