ECE366 - Lesson 7

React and Authentication

Instructor: Professor Hong

Review & Questions

## React and Docker

## More React

## Form Libraries - formik - react hook forms

## Adding Links to the Router
						App.tsx
						```javascript
						import "./App.css";
						import { Link } from "react-router-dom";
						
						function Home() {
							return (
								<div>
									<nav>
										<Link to="/">Home</Link>
										<Link to="/about">About</Link>
										<Link to="/contact">Contact</Link>
									</nav>
									<h1>My Website</h1>
								</div>
							);
						}
						
						export function About() {
							return (
								<div>
									<nav>
										<Link to="/">Home</Link>
										<Link to="/about">About</Link>
										<Link to="/contact">Contact</Link>
									</nav>
									<h1>About Us</h1>
								</div>
							);
						}
						
						export function Contact() {
							return (
								<div>
									<nav>
										<Link to="/">Home</Link>
										<Link to="/about">About</Link>
										<Link to="/contact">Contact</Link>
									</nav>
									<h1>Contact Us</h1>
								</div>
							);
						}
						
						export function App() {
							return <Home />;
						}
						```

## Axios

## App.tsx with fetch
						```javascript
import "./App.css";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";

export function About() {
	return (
		<div>
			<nav>
				<Link to="/">Home</Link>
				<Link to="/about">About</Link>
				<Link to="/contact">Contact</Link>
			</nav>
			<h1>About Us</h1>
		</div>
	);
}

export function Contact() {
	return (
		<div>
			<nav>
				<Link to="/">Home</Link>
				<Link to="/about">About</Link>
				<Link to="/contact">Contact</Link>
			</nav>
			<h1>Contact Us</h1>
		</div>
	);
}

export function App() {
	return <Home />;
}
						```

## Authentication

## Setup Firebase - Go to [https://console.firebase.google.com/](https://console.firebase.google.com/) - Create a new project - No need to select Google analytics - Add firebase to your web app by clicking Web - Insert public keys to main.tsx - Get Started w/ Authentication - Enable Email/Password and save - Add a sample user

## Firebase Configuration
						main.tsx  
						```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { App, About, Contact } from "./App";
import {
    BrowserRouter,
    Routes,
    Route
} from "react-router-dom";

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import LoginPage from "./pages/LoginPage";
import CreateAccountPage from "./pages/CreateAccountPage";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR INFO HERE"
};

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<BrowserRouter>
		<Routes>
			<Route path="/" element={<App />} />
			<Route path="/about" element={<About />} />
			<Route
                path="/contact"
				element={<Contact />}
            />
			<Route path="/login" element={<LoginPage />} />
			<Route path="/create-account" element={<CreateAccountPage />} />
		</Routes>
	</BrowserRouter>,
);
						```

## Login Page
						pages/LoginPage.tsx
						```javascript
						import {useState} from "react";
						import {Link, useNavigate} from "react-router-dom";
						import {getAuth, signInWithEmailAndPassword} from 'firebase/auth';
						
						const LoginPage = () => {
							const [email, setEmail] = useState("");
							const [password, setPassword] = useState("");
							const [error, setError] = useState("");
						
							const navigate = useNavigate();
						
							const logIn = async () => {
								try {
									await signInWithEmailAndPassword(getAuth(), email, password);
									navigate('/');
								} catch (e) {
									setError(e.message);
								}
							};
						
							return (
								<>
									<h1>Log In</h1>
									{error && <p className="error">{error}</p>}
									<input
										placeholder="Your email address"
										value={email}
										onChange={e=>setEmail(e.target.value)}
									/>
									<input
										type="password"
										placeholder="Your password"
										value={password}
										onChange={e=>setPassword(e.target.value)}
									/>
									<button onClick={logIn}>Log In</button>
									<Link to="/create-account">Don't have an account? Create one here</Link>
								</>
							);
						}
						
						export default LoginPage;
						```
						- Calling firebase to log in and receive a token for authentication

## Create Account Page
						pages/CreateAccountPage.tsx
						```javascript
						import {useState} from "react";
						import {Link, useNavigate} from "react-router-dom";
						import {getAuth, createUserWithEmailAndPassword} from "firebase/auth";
						
						
						const CreateAccountPage = () => {
							const [email, setEmail] = useState("");
							const [password, setPassword] = useState("");
							const [confirmPassword, setConfirmPassword] = useState("");
							const [error, setError] = useState("");
						
							const navigate = useNavigate();
						
							const createAccount = async () => {
								try {
									if (password !== confirmPassword) {
										setError("Password and confirm password do not match");
										return;
									}
						
									await createUserWithEmailAndPassword(getAuth(), email, password);
									navigate("/");
								} catch(e) {
									setError(e.message);
								}
							};
						
							return (
								<>
									<h1>Create Account</h1>
									{error && <p className="error">{error}</p>}
									<input
										placeholder="Your email address"
										value={email}
										onChange={e=>setEmail(e.target.value)}
									/>
									<input
										type="password"
										placeholder="Your password"
										value={password}
										onChange={e=>setPassword(e.target.value)}
									/>
									<input
										type="password"
										placeholder="Re-enter your password"
										value={confirmPassword}
										onChange={e=>setConfirmPassword(e.target.value)}
									/>
									<button onClick={createAccount}>Log In</button>
									<Link to="/login">Already have an account? Log in here.</Link>
								</>
							);
						}
						
						export default CreateAccountPage;
						```
						- Similar to log in, but with a different function

## Logging Out
						```javascript
						import { Link, useNavigate } from "react-router-dom";
						import { getAuth, signOut } from "firebase/auth";
						import useUser from "./hooks/useUser";

function Home() {
						  const [data, setData] = useState(null);

const { user, isLoading } = useUser();

const navigate = useNavigate();

useEffect(() => {
						    const loadUsers = async () => {
						      const response = await axios.get(`http://localhost:8080/api/players`);
						      setData(response.data);
						    };
						    loadUsers();
						  }, [isLoading, user]);

if (data)
						    return (
						      <>
						        <h1>RPS</h1>
						        <nav>
						          <Link to="/about">About</Link>
						          <Link to="/contact">Contact</Link>
						          <Link to="/login">Login</Link>
						          {user ? (
						            <button
						              onClick={() => {
						                signOut(getAuth());
						              }}
						            >
						              Log Out
						            </button>
						          ) : (
						            <button
						              onClick={() => {
						                navigate("/login");
						              }}
						            >
						              Log In
						            </button>
						          )}
						        </nav>
						        {user ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Log in to view sensitive info!</p>}
						      </>
						    );

return <h1>Data</h1>;
						}
						```

## Authentication in Spring Boot

## Pass token to Server
						```javascript
						function Home() {
							const [data, setData] = useState(null);
							const { user, isLoading } = useUser();
							const navigate = useNavigate();
						
							useEffect(() => {
								const loadUsers = async () => {
									try {
										const token = user && await user.getIdToken();
										console.log(token);
										const headers = token ? { Authorization: `Bearer ${token}` } : {};
						                const response = await axios.get(`/api/players`, { headers });
										setData(response.data);
									} catch (error) {
										console.error("Error loading user data:", error);
									}
								};
								if (!isLoading) {
									loadUsers();
								}
							}, [isLoading, user]);
						
							const handleLogout = async () => {
								try {
									await signOut(getAuth());
									navigate('/login');
								} catch (error) {
									console.error("Error during sign out:", error);
								}
							};
						
							if (data)
								return (
									<>
										<h1>RPS</h1>
										<nav>
											<Link to="/about">About</Link>
											<Link to="/contact">Contact</Link>
											<Link to="/login">Login</Link>
											{user ? <button onClick={handleLogout}>Log Out</button> : <button onClick={() => navigate('/login')}>Log In</button>}
										</nav>
										{user ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Log in to view sensitive info!</p>}
									</>
								);
						
							return (
								<>
									<h1>RPS</h1>
									<nav>
										<Link to="/about">About</Link>
										<Link to="/contact">Contact</Link>
										<Link to="/login">Login</Link>
										{user ? <button onClick={handleLogout}>Log Out</button> : <button onClick={() => navigate('/login')}>Log In</button>}
									</nav>
								</>
							);
						}
						```

## Putting it all together

## RPS Game Logic - Add server side logic - Add UI to communicate with server