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