DEV Community

Next.js & Django JWT Authentication: Django REST, TypeScript, JWT, Wretch & Djoser

Mangabo Kolawole on February 12, 2024

If you're a software engineer, especially a full-stack developer, your job involves merging different technologies—like backend and frontend—to bui...

Read full post

Saul Rojas Garcia • May 6

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

Mangabo Kolawole • Jun 14

Can I see an example of payload you are using?

cd3v • May 6 • Edited

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)

    if response.status_code == 200:
        access_token = response.data.get('access')
        refresh_token = response.data.get('refresh')

        response.set_cookie(
            'access',
            access_token,
            max_age=settings.AUTH_COOKIE_ACCESS_MAX_AGE,
            path=settings.AUTH_COOKIE_PATH,
            secure=settings.AUTH_COOKIE_SECURE,
            httponly=settings.AUTH_COOKIE_HTTP_ONLY,
            samesite=settings.AUTH_COOKIE_SAMESITE
        )
        response.set_cookie(
            'refresh',
            refresh_token,
            max_age=settings.AUTH_COOKIE_REFRESH_MAX_AGE,
            path=settings.AUTH_COOKIE_PATH,
            secure=settings.AUTH_COOKIE_SECURE,
            httponly=settings.AUTH_COOKIE_HTTP_ONLY,
            samesite=settings.AUTH_COOKIE_SAMESITE
        )

    return response

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.

pszentg • Jun 14

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:

const onSubmit = (data: FormData) => {
    login(data.email, data.password)
      .json((json) => {
        storeToken(json.access, 'access');
        storeToken(json.refresh, 'refresh');
      })
      .catch((err) => {
        setError('root', { type: 'manual', message: err.json.detail });
      });

    const { data: user, isLoading, isValidating } = useSWR('/auth/users/me', fetcher);
    // store the user here in a context manager?

    router.push('dashboard');
  };

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.

Mangabo Kolawole • Jun 14

An idea might be to put the onSubmit method inside a hook function and call it from there.

Something like

const useAuth = () => {

   const onLoginSubmit = () => {login logic there}

   return {onLoginSubmit}
}

Another idea might be to rewrite the views.TokenObtainPairView from the rest_framework_simplejwt package, so you can add the user 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...

thoaingo • Jun 13

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.

Mangabo Kolawole • Jun 14

That was a big mistake on my part then. I corrected it.

In the DJOSER setting, we should have this line too


DJOSER = {
    ...
    'LOGIN_FIELD': 'email',
}

thank you

rodrigo • Feb 18

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.

Mangabo Kolawole • Mar 5

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.

rcmisk • Mar 13

Love it!

Mangabo Kolawole • Mar 18

thank you @rcmisk

Serhii Pastukhov • Mar 28

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 with js-cookies.
Are you sure that we have to install js-cookies, but not js-cookie?

Mangabo Kolawole • Mar 30

Hi! this is definitely a typo. Let me correct it.

thank you!

Allen • May 5

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.

Mangabo Kolawole • May 6

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

Yoshida Daisuke • Jun 25

Thank for your tutorial.
It is very useful for my project build

Ismail • Mar 31 • Edited

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 ?

Mangabo Kolawole • Apr 1

hi! it is on the Django backend. Next.js makes the HTTP request to the backend using wretch.

Ismail • Apr 1

Much appreciated ! Thanks