Self-documentation of Hire +Plus: V1 (6)
Tags: webdev, react, programming, javascript
Published: 2022-06-03 08:03:52

## 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). 

```javascript
ChangeEvent<HTMLInputElement>
```
and 
```javascript
FormEvent<HTMLFormElement>
``` 

```javascript
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](https://www.youtube.com/watch?v=9zdvmgGsww0&list=PL4cUxeGkcC9jERUGvbudErNCeSZHWUVlb) 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 

```javascript
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](https://github.com/AjeaSmith/hire-plus-v1).