If you're a software engineer, especially a full-stack developer, your job involves merging different technologies—like backend and frontend—to bui...
For further actions, you may consider blocking this person and/or reporting abuse
Ideally when setting the cookie, the django backend dictates this by doing something such as below when request is made to the login api endpoint
``
class CustomTokenObtainPairView(TokenObtainPairView):
def post(self, request, *args, **kwargs):
response = super().post(request, *args, **kwargs)
``
With your approach, I haven't been able to use the cookies being set from the django backend on my frontend. Also, is there anyway to set the httponly flag using your approach? All attempts at that have failed since you are setting the cookies through js on the client itself.
Hi, thank you for this tutorial.So far so good but when I try to login I receive the error "username field is required" as I can see the username is not in the login form. I have no finished the tutorial yet but I don't know if I am doing it well
Can I see an example of payload you are using?
Hi!
Wonderful post, simple, easy to follow, detailed enough so I have a clear understanding how all these things fit together.
I was wondering how would you approach validating the user object that you get from SWR? I was hoping to get the user object before you render the dashboard. The reason is that I want to provide an admin UI (not the one provided by django!) and I want to route the user eg. based on the "is_staff" flag. I tried something like this in
Login.tsx
:but it seems I can't use the SWR hook here:
Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Also, how would you store the user object? Should you even at all, or should I just use this hook in every component I need it? I want to avoid prop drilling but I also want to avoid calling swr in every component.
An idea might be to put the onSubmit method inside a hook function and call it from there.
Something like
Another idea might be to rewrite the
views.TokenObtainPairView
from therest_framework_simplejwt
package, so you can add theuser
object when the login is done.For storing the user object, if it doesn't change like that, you can use the SWR cache revalidation and deactivate it.
Then calling
const { data: user, isLoading, isValidating } = useSWR('/auth/users/me', fetcher);
won't call the API every time. But you will need to handle the data revalidation.You can also check with the network package you are using. In this case, we are using
wretch
, so you can read more about their caching middleware. elbywan.github.io/wretch/api/modul...Hi, thank you for the post. However, I've encountered an issue with your logic code. When you define a "Login" component in the frontend that uses email for authentication, the backend (Django or Djoser) defaults to using username for authentication. This mismatch means that attempting to log in with email and password fails, preventing access to the dashboard.
That was a big mistake on my part then. I corrected it.
In the DJOSER setting, we should have this line too
thank you
Hello! Thank you for the post. I have been working on a project which have the similar stack. I am currently trying to make the application server rendered application. So, for that it requires to fetch data in the server components. It is possible to fetch the data in the server components by also refreshing the access token and continuing the request in the server component as I am currently doing it in the client component. Is it possible to completely develop a server side next frontend app with external backend API. I have researched a lot about it and cant find the way to fetch the data and refresh the token in the server component. I am using iron-session to store the session but having difficulty in refreshing the access token and retrying the request with new token in the header. Once again thank you for the post, I am currently learning through internet and diifferent blogs. This one helped me a lot.
Thank you for your comment @rordrigo
The pattern you are describing is possible but you will be passing the context every time to the server to retrieve the tokens.
Regarding the refresh logic, if we follow your proposed pattern, I believe that the refresh request will come from the server and I honestly do not see how you can set tokens from the server side ( I might be wrong.)
I think that it will be better to manage the refreshing on the client side unless I am missing an important implementation detail.
Thank for your tutorial.
It is very useful for my project build
happy to know it helped!
Love it!
thank you @rcmisk
Hi! Thank you for your post.
I'm reading it now.
But I'm confused with this
npm install wretch swr js-cookies react-hook-form
, specifically withjs-cookies
.Are you sure that we have to install js-cookies, but not js-cookie?
Hi! this is definitely a typo. Let me correct it.
thank you!
Hi Kola,
So, I was trying to implement the verify email feature, but I haven't had a luck so far.
My difficulty is in the frontend, I already implemented this at the backend, and it works, but I'm having difficulty implementing this at the frontend.
I would appreciate any help implementing this.
Thank You.
Hi Allen,
Sure I can help. Can you describe your issue with a comment? or if you need quick answers, you can email me at koladev32[at]gmail.com
Thank you for an awesome tutorial. There's one typo I found along the way at:
const accessToken = cookieStore.get("accesssToken");
There is an extra 's' there.
thank you very much. I've corrected it.
Nice!
I forgot that there's actually another spot.
The 'username' should be 'email' instead. Like this.
Thank you very much. Very strange that I missed that part. I believe I was trying to make the code more simple and was dealing with some semantics and I inadvertently omitted to make some corrections.
I will pay more attention to that. Thanks again. I have updated the code.
Hey Im having a little problem on the register part, the backend just tells me I'm sending a bad request and after looking it says that the username field is missing then "creates the user" but when trying to log in it says no active user with this credentials
Sorry for the late reply. Have you been able to solve your issue?
Hi,
I set LOGIN_FIELD to 'email' in DJOSER settings, but Django complains about the 'username' yet:
UserManager.create_user() missing 1 required positional argument: 'username'
Any idea?
Hi, new learner here ! Thank you for this very useful tutorial. Can you please explain where the users data is stored once the user is registered? Isn't on the django backend or nextjs ?
hi! it is on the Django backend. Next.js makes the HTTP request to the backend using wretch.
Much appreciated ! Thanks