Commit 08ce2115 authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

auth provider hook 로 변경

parent 70ab25bf
import React, {useState} from 'react'; import React from 'react';
import { BrowserRouter } from 'react-router-dom' import { BrowserRouter } from 'react-router-dom'
import { AuthContext } from './auth/auth-context'; import { AuthProvider } from './auth/auth-context';
import authHelpers from './auth/auth-helpers';
import MainRouter from './MainRouter'; import MainRouter from './MainRouter';
function App() { function App() {
const [authState, setAuthState] = useState(authHelpers.isAuthenticated())
return ( return (
<AuthContext.Provider value={{authState, setAuthState}}> <AuthProvider>
<BrowserRouter> <BrowserRouter>
<MainRouter /> <MainRouter />
</BrowserRouter> </BrowserRouter>
</AuthContext.Provider> </AuthProvider>
); );
} }
......
import React from "react"; import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom"; import { Route, Switch } from "react-router-dom";
import Signin from "./auth/Signin"; import Signin from "./auth/Signin";
import Home from "./core/Home"; import Home from "./core/Home";
import Menu from "./core/Menu"; import Menu from "./core/Menu";
......
import React, { useState, useContext } from "react"; import React, { useState } from "react";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form"; import Form from "react-bootstrap/Form";
import Container from "react-bootstrap/Container"; import Container from "react-bootstrap/Container";
import { signin } from "./api-auth"; import { signin } from "./api-auth";
import auth from "./auth-helpers"; import auth from "./auth-helpers";
import { Redirect, useHistory } from "react-router-dom"; import { Redirect } from "react-router-dom";
import { AuthContext } from "./auth-context"; import { useAuth } from "./auth-context";
function Signin() { function Signin() {
const authContext = useContext(AuthContext) const { setAuthUser } = useAuth();
// const history = useHistory()
const [values, setValues] = useState({ const [values, setValues] = useState({
email: "", email: "",
password: "", password: "",
...@@ -22,20 +21,18 @@ function Signin() { ...@@ -22,20 +21,18 @@ function Signin() {
}; };
const clickSubmit = (event) => { const clickSubmit = (event) => {
event.preventDefault() event.preventDefault();
const user = { const user = {
email: values.email || undefined, email: values.email || undefined,
password: values.password || undefined, password: values.password || undefined,
}; };
console.log('authContext in Signin.jsx:', authContext)
signin(user).then((data) => { signin(user).then((data) => {
if (data.error) { if (data.error) {
setValues({ ...values, error: data.error }); setValues({ ...values, error: data.error });
} else { } else {
auth.authenticate(data, () => { auth.authenticate(data, () => {
authContext.setAuthState(auth.isAuthenticated()) setAuthUser(auth.isAuthenticated());
setValues({ ...values, error: "", redirect: true }); setValues({ ...values, error: "", redirect: true });
}); });
} }
...@@ -43,7 +40,7 @@ function Signin() { ...@@ -43,7 +40,7 @@ function Signin() {
}; };
if (values.redirect) { if (values.redirect) {
return <Redirect to='/' /> return <Redirect to="/" />;
} }
return ( return (
...@@ -54,7 +51,7 @@ function Signin() { ...@@ -54,7 +51,7 @@ function Signin() {
<Form.Control <Form.Control
type="email" type="email"
placeholder="Enter email" placeholder="Enter email"
onChange={handleChange('email')} onChange={handleChange("email")}
/> />
<Form.Text className="text-muted"> <Form.Text className="text-muted">
We'll never share your email with anyone else. We'll never share your email with anyone else.
...@@ -66,7 +63,7 @@ function Signin() { ...@@ -66,7 +63,7 @@ function Signin() {
<Form.Control <Form.Control
type="password" type="password"
placeholder="Password" placeholder="Password"
onChange={handleChange('password')} onChange={handleChange("password")}
/> />
</Form.Group> </Form.Group>
......
import React from 'react' import React, { useState, useContext } from 'react'
import authHelpers from './auth-helpers'
export const AuthContext = React.createContext({ const AuthContext = React.createContext()
authState: false,
isAuthed: () => {} export const AuthProvider = ({ children }) => {
}) const [authUser, setAuthUser] = useState(authHelpers.isAuthenticated())
\ No newline at end of file
return (
<AuthContext.Provider value={{ authUser, setAuthUser }}>
{children}
</AuthContext.Provider>
)
}
export const useAuth = () => useContext(AuthContext)
\ No newline at end of file
import React, { useState, useEffect, useContext } from "react"; import React from "react";
import Navbar from "react-bootstrap/Navbar"; import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav"; import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown"; import NavDropdown from "react-bootstrap/NavDropdown";
import Form from "react-bootstrap/Form";
import FormControl from "react-bootstrap/FormControl";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
import auth from "../auth/auth-helpers"; import auth from "../auth/auth-helpers";
import { Link, useHistory } from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { AuthContext } from "../auth/auth-context"; import { useAuth } from "../auth/auth-context";
// import { Link } from "react-router-dom";
function Menu() { function Menu() {
const authContext = useContext(AuthContext); const {authUser, setAuthUser} = useAuth()
const history = useHistory(); const history = useHistory();
console.log("Menu.jsx", history);
console.log("authContext in Menu.jsx:", authContext);
return ( return (
<Navbar sticky="top" bg="dark" variant="dark" expand="sm"> <Navbar sticky="top" bg="dark" variant="dark" expand="sm">
<Navbar.Brand href="/"> <Navbar.Brand href="/">
...@@ -40,12 +33,12 @@ function Menu() { ...@@ -40,12 +33,12 @@ function Menu() {
</NavDropdown.Item> </NavDropdown.Item>
</NavDropdown> </NavDropdown>
</Nav> </Nav>
{authContext.authState ? ( {authUser ? (
<Button <Button
onClick={() => onClick={() =>
auth.clearJwt(() => { auth.clearJwt(() => {
history.push("/"); history.push("/");
authContext.setAuthState(false); setAuthUser(false);
}) })
} }
> >
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment