credential + proxy

client/package.json

@@ -57,5 +57,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:4500"
 }

client/src/Utils/PrivateRoutes.js

 import React from 'react';
 import { Redirect, Route } from 'react-router-dom';
-import { isLogined } from '../utils/Auth';
+import { isLogined } from './Auth';
 
 function PrivateRoute({ path, children }) {
     if (isLogined()) {

client/src/components/LoginComp.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import '../App.css'
 import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
 import { LoginWithKakao } from '../utils/Oauth';
+import axios from 'axios';
 
 function LoginComp() {
 
@@ -53,9 +54,17 @@ function LoginComp() {
 
     function handleChange(event) {
         setEmailAddress(event.target.value)
-        console.log(emailAddress)
     }
 
+    console.log(emailAddress)
+
+    async function handleSubmit(event) {
+        event.preventDefault();
+        const res = await axios.post("/api/login", { email: emailAddress })
+        console.log(res)
+    }
+
+
     return (
         <Row className='text-center w-100 my-2'>
             <Card style={cardstyled}>
@@ -89,7 +98,7 @@ function LoginComp() {
                         }
                     </Row>
 
-                    <Form style={inboxstyled}>
+                    <Form style={inboxstyled} onSubmit={handleSubmit}>
                         <FloatingLabel
                             controlId="floatingInput"
                             label="Email"
@@ -97,7 +106,7 @@ function LoginComp() {
                             <Form.Control type="email" placeholder="Email" onChange={handleChange} />
 
                         </FloatingLabel>
-                        <Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend}>
+                        <Button variant='light' className='mt-3' id='formbtn' onClick={CheckEmailSend} type='submit'>
                             LOGIN
                         </Button>
                     </Form>

client/src/components/MainLayer.js

@@ -5,6 +5,7 @@ import '../App.css'
 import UserInfo from './UserInfo';
 import { kakaoLogout } from '../utils/Oauth';
 import axios from 'axios';
+import { Swal } from 'sweetalert2';
 
 
 function MainLayer() {
@@ -33,6 +34,9 @@ function MainLayer() {
         color: 'white'
     }
 
+    const acctoken_cookies = document.cookie.split('=')[1];
+    // console.log(acctoken_cookies)
+
     const logined = localStorage.getItem('nickname')
     const [airUsing, setAirUsing] = useState(false)
 
@@ -51,6 +55,25 @@ function MainLayer() {
         }
     });
 
+    var deleteCookie = function (name) {
+        document.cookie = name + '=; expires=Thu, 01 Jan 1999 00:00:10 GMT;';
+        Swal.fire({
+            title: '로그아웃 성공!',
+            text: '🙏 안녕히 가세요 🙏',
+            icon: 'warning',
+            customClass: 'swal-wide',
+            confirmButtonText: '확인',
+        }).then((res) => {
+            if (res.isConfirmed) {
+                window.location.replace('/')
+            }
+            else {
+                window.location.replace('/')
+            }
+        })
+    }
+
+
     return (
         <Col>
             <Row className='d-flex align-items-center m-auto w-100 p-0'>
@@ -63,7 +86,7 @@ function MainLayer() {
                 <UserInfo />
             </Row>
 
-            {logined &&
+            {acctoken_cookies &&
                 <Form
                     key='checkbox' className="d-flex  justify-content-center w-100" style={{ flexDirection: 'row-reverse' }}>
                     <Form.Check
@@ -78,9 +101,9 @@ function MainLayer() {
 
             <Row className='d-flex justify-content-center align-items-center my-2 mx-auto w-100'>
                 <ButtonGroup vertical className='m-auto' style={{ width: '100%', flexDirection: 'column' }}>
-                    {logined ?
+                    {acctoken_cookies ?
                         //true
-                        <Button variant='light' style={btnstyled} onClick={kakaoLogout}>
+                        <Button variant='light' style={btnstyled} onClick={kakaoLogout || deleteCookie('acs_token')}>
                             로그아웃
                         </Button>
                         :
@@ -91,7 +114,7 @@ function MainLayer() {
                             </Link>
                         </Button>
                     }
-                    {!logined &&
+                    {!acctoken_cookies &&
                         <Button variant='light' style={btnstyled}>
                             <Link to='/signup' id='btnlink'>
                                 회원가입

client/src/components/SignupComp.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import '../App.css'
 import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
 import { LoginWithKakao } from '../utils/Oauth';
+import axios from 'axios';
 
 function SignupComp() {
 
@@ -28,7 +29,7 @@ function SignupComp() {
     }
 
     const initValues = {
-        name: '',
+        nick_name: '',
         email: ''
     }
 
@@ -43,55 +44,28 @@ function SignupComp() {
     function handleChange(event) {
         const { name, value } = event.target
         setFormValues({ ...formValues, [name]: value })
-        console.log('???', formValues)
     }
-
-    function CheckUserExist() {
-        localStorage.setItem('signup_username', formValues.name)
-        localStorage.setItem('signup_email_Address', formValues.email)
-
-        const signUser = localStorage.getItem('signup_username')
-        const signEmail = localStorage.getItem('signup_email_Address').split('@')[1]
-
-        if (signEmail && signUser) {
-            setAlertShow(true)
-            setUserExist(!userExist)
-        }
-        else
-            if (!signEmail) {
-                setAlertShow(false)
-                // setUserExist(true)
-            }
-    }
-
-    function handleSubmit(event) {
-        const form = event.currentTarget;
-        console.log('formValues', formValues);
-        console.log('formValues.values', Object.values(formValues)[0].length);
-
-        // console.log(form)
-        // if (Object.values(formValues)[0].length !== 0) { //form.checkValidity() === false
-        //     event.preventDefault();
-        //     event.stopPropagation();
-        // }
-        console.log(validated)
-        setValidated(true);
-        // const form = event.current
-        // setFormError(validate(formValues))
-        // setIsSubmit(true)
-    }
-
-    function handleClickSubm() {
-        // setEmailSubm(true);
-        const subm = document.getElementById("subm-mailSent");
-        subm.style.visibility = 'visible'
-        // const aftermail = document.getElementById('AftermailSent');
-        // aftermail.style.display = ''
+    console.log('???', formValues)
+
+    // function CheckUserExist() {
+    //     const signUser = localStorage.getItem('signup_username')
+    //     const signEmail = localStorage.getItem('signup_email_Address').split('@')[1]
+
+    //     if (signEmail && signUser) {
+    //         setAlertShow(true)
+    //         setUserExist(!userExist)
+    //     }
+    //     else
+    //         if (!signEmail) {
+    //             setAlertShow(false)
+    //         }
+    // }
+
+    async function handleSubmit(event) {
+        event.preventDefault();
+        await axios.post("/api/signup", formValues)
     }
 
-
-
-
     return (
 
         <Row className='text-center w-100 my-2'>
@@ -129,14 +103,13 @@ function SignupComp() {
                     <Form style={inboxstyled} onSubmit={handleSubmit}>
                         <FloatingLabel
                             controlId="floatingInput"
-                            label="Name"
+                            label="Nickname"
                             className='mb-3'
                         >
                             <Form.Control
                                 type="text"
-                                name="name"
-                                placeholder="Name"
-                                value={formValues.name}
+                                name="nick_name"
+                                placeholder="Nickname"
                                 onChange={handleChange}
                                 required
                             />
@@ -149,14 +122,13 @@ function SignupComp() {
                                 type="email"
                                 name="email"
                                 placeholder="Email Address"
-                                value={formValues.email}
                                 onChange={handleChange}
                                 required
                             />
                         </FloatingLabel>
 
-                        <Button variant='light' className='mt-3' id='formbtn' type='submit' onClick={CheckUserExist}>
-                            {/* type="submit" */}
+                        <Button variant='light' className='mt-3' id='formbtn' type='submit'>
+                            {/*  onClick={CheckUserExist} */}
                             Sign Up
                         </Button>
                     </Form>

client/src/pages/Home.js

@@ -32,31 +32,33 @@ function Home() {
         padding: '0'
     }
 
-    const getusername = axios.get(`/api/user`)
-    console.log(getusername)
-
+    async function test() {
+        const res = await axios.get("/api/user-info", { withCredentials: true })
+        console.log("@@@@", res)
+    }
+    test()
 
     return (
-            <Container className='m-auto d-flex position-relative'
-                style={{ flexDirection: 'column' }} fluid>
-                <Row className='d-flex'>
-                    <Row style={constyled} className='m-auto'>
-                        <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
-                            <Row style={col1sty} className='m-auto'>
-                                <MainLayer />
-                            </Row>
-                        </Col>
-
-                        <Col md={6} style={col2sty}>
-                            {/* <TimeNow /> */}
-                            <EueSuggest />
-                            <ChartLine />
-                            <ChartDoughnut />
-                            <Donation />
-                        </Col>
-                    </Row>
+        <Container className='m-auto d-flex position-relative'
+            style={{ flexDirection: 'column' }} fluid>
+            <Row className='d-flex'>
+                <Row style={constyled} className='m-auto'>
+                    <Col xs={12} md={6} className='d-flex justify-content-center' id='stickyy'>
+                        <Row style={col1sty} className='m-auto'>
+                            <MainLayer />
+                        </Row>
+                    </Col>
+
+                    <Col md={6} style={col2sty}>
+                        {/* <TimeNow /> */}
+                        <EueSuggest />
+                        <ChartLine />
+                        <ChartDoughnut />
+                        <Donation />
+                    </Col>
                 </Row>
-            </Container>
+            </Row>
+        </Container>
     );
 }
 

server/src/app.js

@@ -18,7 +18,9 @@ const app = express();
 app.set("view engine", "pug");
 app.set("views", path.join(__dirname, "views"));
 
-app.use(cors());
+app.use(cors({
+    credentials: true
+}));
 app.use(helmet());
 app.use(cookieParser());
 app.use(express.json());

server/src/controllers/userController.js

@@ -148,7 +148,7 @@ export const getConfirm = async (req, res) => {
     res
       .status(server_status.code.ok)
       .cookie("acs_token", accessT)
-      .redirect("/api");
+      .redirect("http://localhost:3000/");
   } catch (err) {
     res
       .status(server_status.code.err)

server/src/middlewares.js

@@ -20,6 +20,8 @@ export const onlyPrivate = (req, res, next) => {
     cookies: { acs_token },
   } = req;
 
+  console.log('@@@@@@@@@@@@@@',req.cookies);
+
   try {
     const acs_decode = jwt.verify(acs_token, envs.secretKey.access_token);
     next();