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.
Top comments (0)