How to pass username & password to fetcher

[Glutch]

I fail to understand how i would pass username and password to the useUser function.

useUser.js

import useSWR from "swr"

const fetcher = (username, password) => fetch('/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username, password }),
}).then(res => res.json())

const use_user = () => {
  const { data, mutate, error } = useSWR('/login', fetcher)

  const loading = !data && !error
  const loggedOut = error && error.status === 403

  console.log('swr data', data)
  console.log('swr error', error)

  return {
    loading,
    loggedOut,
    user: data,
    mutate
  }
}

module.exports = useUser

The "Authentication example" has this as login function

export function login() {
  // add cookie
  document.cookie = "swr-test-token=swr;";
}

Which i find very diffuse. Is my method of logging in weird? Am i allowed to think that the example is not complete / thorough enough?

I know i "could" pass username and password with useSWR(['/login', username, password'], fetcher). But that doesn't really help. Since i'm importing the useUser function from index.js.

Should i pass username and password through this?

const { user, mutate } = use_user(username, password)

It just doesnt feel right since im not seeing that anywhere in the tutorials. I'm pretty lost, please help

[sergiodxa]

First, SWR is not intended to do POST requests, only GET requests, this is because SWR will trigger the request multiple times and that will cause unexpected behaviors if you do POST/PUT/PATCH/DELETE requests.

Ignoring that, I would do:

function fetcher(url, username, password) {
  return fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ username, password }),
  }).then(res => res.json());
}

export function useUser(username, password) {
  const { data, mutate, error } = useSWR(
    ["/login", username, password],
    fetcher,
  );

  const loading = !data && !error;
  const loggedOut = error && error.status === 403;

  console.log("swr data", data);
  console.log("swr error", error);

  return {
    loading,
    loggedOut,
    user: data,
    mutate,
  };
}

const { user } = useUser("my-username", "my-strong-password");

Something like that, but remember, you should not use SWR to POST, in your case, this will cause the user to log-in multiple times.

[Alexanderdunlop]

Hey @sergiodxa I noticed you said "you should not use SWR to POST",
Could you explain to me why you shouldn't?
Is there somewhere I can read about this?
I have searched all over and read through the SWR docs can't find anything on this.

If I was to use conditional SWR fetching would POST be viable?

I noticed you said the work around is to set cookies on the API headers which our team has one a ticket for in the new year but at the moment we aren't able to and we are currently converting to SWR.

All help would be appreciated :)

Many thanks

[Glutch]

Thank you. How would you normally do authentication with swr? any module i should look into?

[sergiodxa]

What I usually do is to use a cookie to store the user token, this cookie will be sent automatically by the browser with every request to the API.

And to authenticate, I send the credentials in a POST inside an even handler and once I get the token in the response I store it in a cookie.

I also usually have a useCurrentUser hook which requests an endpoint of the API to get the current user, the endpoint give me the user data based on the cookie.

[Glutch]

Alright cool! Is there any full example?

[sergiodxa]

The example in the website https://swr.vercel.app/examples/auth