Skip to content

Commit

Permalink
Feat(user): 네이버 로그인 연결
Browse files Browse the repository at this point in the history
- 네이버 아이디 로그인 기능 연결
- 버튼 이미지 추가

ref: #67
  • Loading branch information
hwna00 committed Sep 19, 2023
1 parent 1a07fc4 commit 02300aa
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 9 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Image } from '@chakra-ui/react';
import logo from '../../images/btnG_icon_circle.png';
import { useCallback } from 'react';

const NaverForm = function () {
const base_url = 'https://nid.naver.com/oauth2.0/authorize';
const REDIRECT_URI = `http://localhost:8080/auth/login/naver-callback`;
const STATE = 'slfjsdf';
const NAVER_AUTH_URL = `${base_url}?response_type=code&client_id=${
process.env.REACT_APP_NAVER_CLIENT_ID
}&redirect_uri=${encodeURI(REDIRECT_URI)}&state=${STATE}`;

const onLoginClick = useCallback(() => {
window.location.href = NAVER_AUTH_URL;
}, [NAVER_AUTH_URL]);

return <Image onClick={onLoginClick} height={'14'} src={logo} />;
};

export default NaverForm;
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"main": "NaverLoingButton.js"
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 5 additions & 9 deletions packages/apps/user/src/views/Auth/LogIn/LogIn.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import { useCallback, useState } from 'react';

import { useNavigate , Link as ReactRouterLink } from 'react-router-dom';
import { useNavigate, Link as ReactRouterLink } from 'react-router-dom';
import { FaUserAlt, FaLock } from 'react-icons/fa';
import {
AiFillGithub,
AiFillGoogleCircle,
AiFillTwitterCircle,
} from 'react-icons/ai';
import { AiFillGoogleCircle, AiFillTwitterCircle } from 'react-icons/ai';
import { useForm } from 'react-hook-form';
import {
Box,
Expand All @@ -26,6 +22,7 @@ import {
} from '@chakra-ui/react';

import { logIn, googleLogin, auth, provider } from '../../../../firebase';
import NaverLoginButton from '../../../components/NaverLoginButton/NaverLoginButton';

function LogIn() {
const [showPassword, setShowPassword] = useState(false);
Expand Down Expand Up @@ -101,9 +98,7 @@ function LogIn() {
alignItems="center"
padding="15px"
>
<Button bgColor="white">
<Icon as={AiFillGithub} boxSize="30px" />
</Button>
<NaverLoginButton />

<Button bgColor="white" onClick={googleClick}>
<Icon as={AiFillGoogleCircle} boxSize="30px" />
Expand All @@ -112,6 +107,7 @@ function LogIn() {
<Icon as={AiFillTwitterCircle} boxSize="30px" />
</Button>
</HStack>

<FormControl isInvalid={errors.email}>
<InputGroup>
<InputLeftElement pointerEvents="none">
Expand Down

0 comments on commit 02300aa

Please sign in to comment.