Self-documentation of Hire +Plus: V1 (6)

What I cover

Updates
Sign in form functionality
Firebase authentication setup

Updates

I moved the launch component to the routes folder. It's more of a page than it is a component. renamed to => launch-page.tsx.

Sign in form functionality

I added the form fields and form events that corresponds to typescript. With my handleChange and handleSubmit funcs I had to specific the types of the events (which I had to import from react).

ChangeEvent<HTMLInputElement>

and

FormEvent<HTMLFormElement>

import { ChangeEvent, FormEvent, useState } from 'react';
import googleIcon from '../../assets/icons/google.png';

import {
    signInEmailAndPassword,
    signInWithGooglePopup,
} from '../../utils/firebase/firebase.utils';

const defaultFormFields = {
    email: '',
    password: '',
};
const SignIn: React.FunctionComponent = () => {
    const [formFields, setFormFields] = useState(defaultFormFields);
    const { email, password } = formFields;

    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        const { name, value } = event.target;
        setFormFields({ ...formFields, [name]: value });
    };

    const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        // login with firebase
        await signInEmailAndPassword(email, password);
    };
    const signInGooglePopup = async () => {
        await signInWithGooglePopup();
    };

    return (
        <div>....</div>
    );
};

export default SignIn;

Note: Don't mind the imports from firebase and the signInWithGooglePopup() and signInEmailAndPassword() functions for now, I'll get into that in the firebase section.

Firebase Authentication setup

I set up a firebase project and connected it to my project. I recommend using this video/series to get it set up. (Fast forward to video 3)

Once I got everything installed from firebase, I created an src/utils/firebase/ folder. Within that, I added a firebase.utils.ts file. Inside, I added

import { initializeApp } from 'firebase/app';

// methods needed for authentication
import {
    getAuth,
    signInWithPopup,
    GoogleAuthProvider,
    signInWithEmailAndPassword,
} from 'firebase/auth';

// my config info from firebase to connect everything
const firebaseConfig = {
    apiKey: 'APIKEY_FROM_FIREBASE',
    authDomain: 'AUTH_DOMAIN_FROM_FIREBASE',
    projectId: 'PROJECT_ID_FROM_FIREBASE',
    storageBucket: 'STORAG_EBUCKET_FROM_FIREBASE',
    messagingSenderId: 'MESSAGING_SENDERID_FROM_FIREBASE',
    appId: 'APPID_FROM_FIREBASE',
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);

// to use google sign in functionality
const googleProvider = new GoogleAuthProvider();

googleProvider.setCustomParameters({
    prompt: 'select_account',
});

// get access to authenticated user
export const auth = getAuth(firebaseApp);

// Sign in with google helper function
export const signInWithGooglePopup = async () => {
    await signInWithPopup(auth, googleProvider);
};

//Sign in with email and password helper function
export const signInEmailAndPassword = async (
    email: string,
    password: string
) => {
    if (!email || !password) return;
    await signInWithEmailAndPassword(auth, email, password);
};

That's all for now. Stay tuned for more! View the source code here.

Blog

Self-documentation of Hire +Plus: V1 (6)

AjeaS

What I cover

Updates

Sign in form functionality

Firebase Authentication setup

Join Our Newsletter. No Spam, Only the good stuff.

Related