winstein27 / firebase-login

React project to signup, login and logout using Firebase Authentication.

Personal Expenses

This project allows users to create an account and login using Firebase Authentication.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Create an account using email and password
• Login with the created account
• Logout from my account

Screenshot

Links

• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow
• React
• Context API
• React Router
• React Icons
• React Toastify
• TypeScript
• Vite
• Firebase
• Yarn

What I learned

Context API (Creating context and provider):

const UserContext = createContext({
  userIsLogged: false,
  loggedUser: {} as User,
  logUserIn: (userCredential: Firebase.UserCredential) => {},
  logUserOut: () => {},
});

const UserProvider = (props: { children: React.ReactNode }) => {
  const [userState, setUserState] = useState(initalState);

  const logUserIn = (userCredential: Firebase.UserCredential) => {
    setUserState({
      userIsLogged: true,
      loggedUser: {
        id: userCredential.user.uid,
        firstName: '',
        lastName: '',
        email: userCredential.user.email || '',
      },
    });
  };

  const logUserOut = () => {
    setUserState(initalState);
  };

  const userContext = {
    userIsLogged: userState.userIsLogged,
    loggedUser: userState.loggedUser,
    logUserIn,
    logUserOut,
  };

  return (
    <UserContext.Provider value={userContext}>
      {props.children}
    </UserContext.Provider>
  );

React hook to validate inputs:

const useInput = (props: Props) => {
  const [value, setValue] = useState('');
  const [inputWasTouched, setInputWasTouched] = useState(false);

  const valueIsValid = props.validation(value);

  const valueChangedHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  const inputTouchedHandler = () => {
    setInputWasTouched(true);
  };

  return {
    value: value,
    touched: inputWasTouched,
    isValid: valueIsValid,
    changeHandler: valueChangedHandler,
    blurHandler: inputTouchedHandler,
  };
};

Useful resources

• React Environment Variables - This helped to set up environment variables to configure Firebase without exposing credentials.
• Vite Environment Variables - This helped to set up Vite environment variables.
• Dark mode - This helped to implement light/dark mode.

Author

• LinkedIn - Winstein Martins