#Next Routing / Linking to page based on Auth

5 messages · Page 1 of 1 (latest)

gleaming dagger
#

hey all! apologies if this is gonna be a bit of a code dump but i was hoping that this could be the right place for help, basically im trying to make an email and pwd login page using Next JS and Firebase but im not sure if i am able to conditionally route my my dashboard page based on if the log in details are correct using Next/Link, this is what i have so far!

const LoginMobile = () => {

    initFirebase()

    const [data, setData] = useState({
        email: '',
        pwd: ''
    });

    const auth = getAuth();

    const handleLogin = () => {
        signInWithEmailAndPassword(auth, data.email, data.pwd)
            .then((userCredential) => {
                // Signed in 
                const user = userCredential.user;
            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;

                alert("Incorrect Details! ")
            });
    }

    return(
        <div className="[tons of styling]">
            <form className="[tons of styling]">

                <label className="[tons of styling]>
                    LOGIN
                </label>

                <LoginInput 
                  placeholder="Email address" 
                  type="text" 
                  value={data.email} 
                  onChange={(e: any) => setData({...data, email: e.target.value})} />
                <LoginInput 
                  placeholder="Password" 
                  type="password" 
                  value={data.pwd} 
                   onChange={(e: any) => setData({...data, pwd: e.target.value})} />

               //this button is custom with styles
                <Button>
                    Sign In
                </Button>

                <Link href={"/dashboard"}>
                Link
                </Link>

            </form>
        </div>
    )
}
visual lion
#

Move initFirebase() out of the component. Right now that function will get called every time your state changes. Firebase can probably handle it OK, but its not necessary to call the function so often

#

Besides that your code looks good. To navigate to the /dashboard after a successful signin you can use the useRouter hook. It'll probably look like this:

import { useRouter } from 'next/navigation';

initFirebase()

const LoginMobile = () => {
    const router = useRouter();
    const [data, setData] = useState({
        email: '',
        pwd: ''
    });

    const auth = getAuth();

    const handleLogin = () => {
        signInWithEmailAndPassword(auth, data.email, data.pwd)
            .then((userCredential) => {
                router.push('/dashboard')
            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;

                alert("Incorrect Details! ")
            });
    }

    return (
        // ...JSX...
    )
}
#

@gleaming dagger

gleaming dagger
#

absolutely amazing, didnt know next/navigation was a thing and just assumed everything came under the Link lib so massive thank you! @visual lion
and good shout about the initFirebase too, ill get that moved, using the new appDir feature atm so was thinking of having it on the page.tsx within the /login folder!