0

I am using supabase auth helper package in my project. When the user enters the login details it should be redirected to the order page. I am using supabase auth condition in the order page. But when the user enters the login details it is not redirected to the order page.

code for the authentication in the order-page is given below :-

export const getServerSideProps = withPageAuth({ redirectTo: '/admin/login',
    async getServerSideProps(ctx) {
        // Access the user object
        const { user, accessToken } = await getUser(ctx);
        return { props: { email: user?.email } };
    }
});

login page code is given below:-

async function handleSubmit(e) {
        e.preventDefault();
        const { user, error } = await supabase.auth.signIn({
            email,
            password
        })
        router.push('/orders')
    }
    return (
        <Layout>
            <div className="flex items-center justify-center h-screen">
                <form onSubmit={handleSubmit}>
                    <p className="text-center text-[27px] text-white">Admin Login</p>
                    <div className="mt-4 text-white">
                        <p className="text-[14px]">Email</p>
                        <input type="text" className="bg-[#4A4949] rounded-md py-2 px-1 w-[300px]"
                            placeholder="Email Address"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                        />
                    </div>
                    <div className="mt-4 text-white">
                        <p className="text-[14px]">Password</p>
                        <input type="password" className="bg-[#4A4949] rounded-md py-2 px-1 w-[300px]"
                            placeholder="Password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    <button className="mt-8 bg-[#4A4949] text-white rounded w-[300px] py-2">Login</button>
                </form>
            </div>
        </Layout >
    )
}
Mohammed Hafiz
  • 91
  • 1
  • 3
  • 7
  • _"But when the user enters the login details it is not redirected to the order page"_ - Doesn't that mean the problem lies in the login page? – juliomalves Aug 16 '22 at 22:34
  • Yup, we might be able to assist you if you could provide the code on your login page! – dshukertjr Aug 17 '22 at 06:22
  • In login page if user enters the email and password, he is just redirected to order-page. The code of login page is given above. – Mohammed Hafiz Aug 17 '22 at 09:35

1 Answers1

0

You will need to wait for the user object to be defined before calling router.push:

import { useUser } from '@supabase/supabase-auth-helpers/react';

const { user } = useUser();

useEffect(() => {
    if (user) {
      router.push('/orders');
    }
  }, [user]);

async function handleSubmit(e) {
        e.preventDefault();
        const { user, error } = await supabase.auth.signIn({
            email,
            password
        })
    }
thorwebdev
  • 818
  • 4
  • 9
  • I have to do this without using useEffect. Initially I had done this with useEffect. But I think it is better to do the checking in server side than in the frontend. That's why I avoid using useEffect – Mohammed Hafiz Aug 19 '22 at 04:59