Store user session data?

[silk laurel]

Hi!

I have a Django + DRF backend and I'm trying to implement a frontend (this is my first project). I have a login form and when you submit the form, I want to send a request to the backend that fetches the user object.

here's the current implementation of my Login component:

{/* imports */}

const Login = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    setError,
  } = useForm<FormData>();

  const router = useRouter();
  const { login, storeToken, getToken } = AuthActions();
  const { user, isError, isLoading, isValidating } = useUserData();
  const accessToken = getToken('accessToken');

  const onSubmit = async (data: FormData) => {
    await 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 });
      });

    {/* redirect user based on user.role */}

    // would be nice to show a spinner while it's validating or loading, 
    // but this won't work since we're running this in the onSubmit function I guess?
    if (isLoading || isValidating || !accessToken) {
      return <Spinner />;
    }

    if (isError) {
      return <div>Error fetching user data</div>;
    }
  };

  return (
    {*/ return the Login component */}
};

export default Login;

what I need: the login() method saves the jwt token into a cookie. the useUserData() is a hook, that fetches the user object from the backend via SWR, but it needs the JWT token first. right now if I submit the form, and there's no token created yet (eg. first user), my login flow will break.

I admit, I'm new to frontend, I'm struggling with the concepts, please let me know how should I approach this problem.

[snow temple]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[silk laurel]

if it helps, here's the hook implementation:

{/* imports */}

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

const useUserData = () => {
  const { getToken } = AuthActions();
  const accessToken = getToken('access');

  // Is there a nicer way to make sure this hook only runs when there's an accessToken?
  const { data, error, isLoading, isValidating } = useSWR(
    accessToken ? '/auth/users/me' : null,
    fetcher
  );

  return {
    user: data,
    isError: error,
    isLoading: isLoading,
    isValidating: isValidating,
  };
};

export default useUserData;

[silk laurel]

bump

[silk laurel]

bump

[silk laurel]

bump

[silk laurel]

bump

[silk laurel]

bump

[silk laurel]

is there anything that I can do to make the description more clear? I find it very disencouraging that it's been a week and I got no replies. I asked the same on stackoverflow and it was downvoted without a single comment.