Implementing User Authentication with Next JS and Firebase

// app/firebase/config.js
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
    // Make sure to paste your own SDK here
    //your own key
    apiKey: "AIzaSyDLakJA2913lao5-coYdNsgYOmhUdmqqUQ", 
    authDomain: "cosmos-bc240.firebaseapp.com",
    projectId: "cosmos-bc240",
    storageBucket: "cosmos-bc240.appspot.com",
    messagingSenderId: "419815671214",
    appId: "1:419815671214:web:6f412f8affff60aaa6b43f",
    measurementId: "G-8H6FHT4ZME"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

export const auth = getAuth(app);
export default function () { (<>Dummy function</>) }

// app/log-in/page.js
'use client'
import React from "react";
import { useRef } from "react"
import { auth } from '@/app/firebase/config';
import {
    signInWithEmailAndPassword
} from "firebase/auth";

const login = () => {

    const logemailRef = useRef();
    const logpasswordRef = useRef();

    const login = (e) => {
        e.preventDefault();

        const email = logemailRef.current.value;
        const password = logpasswordRef.current.value;

        signInWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                // Signed in 
                const user = userCredential.user;
                // ...
                console.log(user)
                alert(`Welcome ${user.email} 
    redirecting to GeeksForGeeks`)

                //router to next page
                window.location.href =
                    'https://www.geeksforgeeks.org/user/ujjwal_gupta/';

            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                alert(errorMessage)
            });
    }
    return (
        <div>
            <center>
                <h1>Log in screen</h1><br /><br />
                <form onSubmit={login}>
                    <input type="email"
                        placeholder="Enter your email"
                        ref={logemailRef}
                        style={{ color: 'green' }} /><br />
                    <br></br>
                    <input type="password"
                        placeholder="Enter your password"
                        ref={logpasswordRef}
                        style={{ color: 'green' }} /><br />
                    <br /><button type="submit"
                        className="w-200 p-3 bg-indigo-600 
        rounded text-white hover:bg-indigo-500">
                        Log In
                    </button>
                </form>
            </center>
        </div>
    )
}
export default login

// app/sign-up/page.js
'use client'
import React from "react";
import { useRef } from 'react'
import {
    createUserWithEmailAndPassword
} from "firebase/auth";
import { auth
 } from '@/app/firebase/config';
import {
    redirect
} from "next/dist/server/api-utils";

const signup = () => {

    const emailRef = useRef();
    const passwordRef = useRef();


    const signup = (e) => {
        e.preventDefault();

        const email = emailRef.current.value;
        const password = passwordRef.current.value;

        createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                // Signed up 
                const user = userCredential.user;
                // ...
                alert(`Successfully signup 
                redirecting to Log in page`);
                window.location.href = './log-in/';
            })
            .catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                // ..
                alert(errorMessage);
            });
    }
    return (

        <div>
            <center>
                <h1>Sign Up screen</h1><br /><br />
                <form onSubmit={signup}>
                    <input type="email"
                        placeholder="Enter your email"
                        ref={emailRef}
                        style={{ color: 'green' }} />
                    <br /><br></br>
                    <input type="password"
                        placeholder="Enter your password"
                        ref={passwordRef}
                        style={{ color: 'green' }} /><br />
                    <br />
                    <button type="submit"
                        className="w-200 p-3 bg-indigo-600 
                     rounded text-white hover:bg-indigo-500">
                        Sign Up
                    </button>
                </form>
            </center>
        </div>
    )
}

export default signup