Store signup response (user and token) in auth context

// context/auth.js
import { useState, useEffect, useContext } from "react";
import { Form, Input, Button, Checkbox } from "antd";
import { MailOutlined, LockOutlined, UserOutlined } from "@ant-design/icons";
import { Row, Col, Typography } from "antd";
import toast from "react-hot-toast";
import useAxios from "../hooks/useAxios";
import { AuthContext } from "../context/auth";
import { useRouter } from "next/router";

const { Title } = Typography;

const SignUp = () => {
  // context
  const [auth, setAuth] = useContext(AuthContext);
  // hooks
  const axios = useAxios();
  const router = useRouter();
  // state
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    // console.log("Success:", values);
    try {
      setLoading(true);
      const { data } = await axios.post(`/signup`, values);
      console.log(data);
      if (data.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        // save user and token response in context, localstorage then redirect user to dashboard
        setAuth({ user: data.user, token: data.token });
        localStorage.setItem("auth", JSON.stringify(data));
        toast.success("Successfully registered");
        setLoading(false);
        router.push("/");
        setLoading(false);
      }
    } catch (err) {
      toast.error("Signup failed. Try again.");
      console.log(err);
      setLoading(false);
    }
  };
  // rest of code
}

Add loading state to submit button. It will show loading icon while the value is true

<Form.Item>
    <Button type="primary" htmlType="submit" loading={loading}>
      Sign Up
    </Button>
    <br /> Or <a href="">Register now!</a>
</Form.Item>

Now on user signup. Token and user info is saved in auth context and also in local storage. On page reload the data is retrieved from local storage.