Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4/12] Kan 22 Connect API (login, signup, autoLogin) #6

Merged
merged 3 commits into from
Apr 12, 2024
Merged

[4/12] Kan 22 Connect API (login, signup, autoLogin) #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c03e23c
Feat/APIconnect
sjsjmine129 Apr 12, 2024
b783fdb
Feat/Auto Login with token
sjsjmine129 Apr 12, 2024
d4a739d
Add/annotation
sjsjmine129 Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions src/screens/home/HomeScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useState, useCallback, useEffect} from 'react';
import React, {useState, useCallback, useEffect, useContext} from 'react';
import {View, Text, SafeAreaView, ScrollView, StyleSheet} from 'react-native';
import {
COLOR_WHITE,
Expand All @@ -11,10 +11,30 @@ import {useNavigation} from '@react-navigation/native';
import {SvgXml} from 'react-native-svg';
import {svgXml} from '../../assets/svg';
import Header from '../../components/Header';

import AppContext from '../../components/AppContext';
import axios from 'axios';
import {API_URL} from '@env';

export default function HomeScreen() {
const navigation = useNavigation();
const context = useContext(AppContext);

const helloAPI = async () => {
try {
const response = await axios.get(`${API_URL}/hello/security-test`, {
headers: {Authorization: `Bearer ${context.accessToken}`},
});

console.log('response:', response.data.data);

if (!response.data.data) {
console.log('Error: No return data');
return;
}
} catch (e) {
console.log('error', e);
}
};

Comment on lines +20 to +37
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 api는 나중에 제거할 예정인가여?
hello api들은 테스트용도로 둔거였어서 ㅎㅎ 어떤용도로 사용할지 궁금해서 여쭤봅니다

Copy link
Collaborator Author

@sjsjmine129 sjsjmine129 Apr 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앱에 저장되어 있는 토큰이 있으면 이게 맞는 토큰인지 확인을 하는 부분입니다.
따로 API요청드릴까 했는데 토큰 보내고 맞으면 리턴주는 저 Hello가 있길래 저걸로 해뒀습니다.

나중에 진짜 확인용 API 로 교체하면 될거 같습니다

ps 기능은 그대로라 이대로 사용해도 무관합니다

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하 넵 그용도로 쓰셔도 괜찮습니다. 넵 그럼 그걸로생각하고 납둘게요.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

가 아니라 홈이네요 ㅋㅋㅋㅋㅋ

네 나중에 삭제할 예정입니다
다른 분들 APi쏘는 확인용으로 뒀습니다

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

위에 댓글에 내용은 Splash 스크린에 있습니다

코멘트 주신 부분은 나중에 삭제할 부분입니다!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 ㅎㅎ 넵넵 !

return (
<>
Expand All @@ -31,11 +51,10 @@ export default function HomeScreen() {
</AnimatedButton>
<AnimatedButton
onPress={() => {
console.log('PRESSED~!!');
navigation.navigate('ListNavigator');
helloAPI();
}}
style={styles.buttonTest}>
<Text style={styles.buttonText}>ListNavigator</Text>
<Text style={styles.buttonText}>Hello API Check</Text>
</AnimatedButton>
</View>
</>
Expand Down
58 changes: 35 additions & 23 deletions src/screens/signup/LoginScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,25 @@ import {SvgXml} from 'react-native-svg';
import {svgXml} from '../../assets/svg';
import LongPrimaryButton from '../../components/LongPrimaryButton';
import AppContext from '../../components/AppContext';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function LoginScreen() {
const navigation = useNavigation();

//state 선언 -> UI에 영향을 미치는 변수들 만약 이게 바뀌었을때 화면이 바뀌어야하면 state로 선언
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [passwordShow, setPasswordShow] = useState(true);
const [disable, setDisable] = useState(true);

//ref 선언 -> 요소를 직접 제어할때 사용
const emailInputRef = useRef(null);
const passwordInputRef = useRef(null);

// 앱내부에서 전역변수로 사용하는 것 쓰고싶으면 선언한다
const context = useContext(AppContext);

// [ ] 안의 State가 변경될 때마다 실행된다. 여기서는 email, password가 변경될 때마다 실행되서 로그인 버튼이 활성화 될지 비활성화 될지 결정한다.
useEffect(() => {
if (email && password && disable) {
setDisable(false);
Expand All @@ -52,38 +59,43 @@ export default function LoginScreen() {
}
}, [email, password]);

// 이메일 입력이 끝나면 패스워드 입력으로 커서를 이동시키는 함수
const endEmailInput = () => {
passwordInputRef.current.focus();
};

// 로그인 하는 함수 -> 버튼 누르면 & 입력하고 엔터 누르면 작동
const login = async () => {
//TODO: 로그인 API 호출 & 토큰 저장
console.log('email:', email);
console.log('password:', password);

try {
//TODO: 로그인 API확인
//로그인 하고 토큰 저장하는 부분
// const response = await axios.post(
// `${API_URL}/v1/users/email/sign-in`,
// {
// email: email,
// password: password,
// },
// );
// console.log('response:', response.data.data);

// if (!response.data.data) {
// console.log('Error: No return data');
// return;
// }
// const accessToken = response.data.data.accessToken;
// const refreshToken = response.data.data.refreshToken;

// context.setAccessTokenValue(accessToken);
// context.setRefreshTokenValue(refreshToken);
// AsyncStorage.setItem('accessToken', accessToken);
// AsyncStorage.setItem('refreshToken', refreshToken);
// 백엔드 요청 -> 아직 로그인 전인 백엔드 요청이라 토큰이 필요없다.
const response = await axios.post(`${API_URL}/v1/users/email/sign-in`, {
email: email,
password: password,
});

//출력
console.log('response:', response.data.data);

//백엔드에서 받은 데이터가 없으면 에러 출력
if (!response.data.data) {
console.log('Error: No return data');
return;
}

//백엔드에서 받은 토큰을 저장하고 화면 이동
const accessToken = response.data.data.token.accessToken;
const refreshToken = response.data.data.token.refreshToken;

//전역 변수에 저장
context.setAccessTokenValue(accessToken);
context.setRefreshTokenValue(refreshToken);

//디바이스에 저장
AsyncStorage.setItem('accessToken', accessToken);
AsyncStorage.setItem('refreshToken', refreshToken);

navigation.navigate('BottomTab');
} catch (error) {
Expand Down
44 changes: 21 additions & 23 deletions src/screens/signup/SignupScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,29 +70,25 @@ export default function SignupScreen() {
console.log('password:', password);

try {
//TODO: 회원가입 API확인
//회원가입 하고 토큰 저장하는 부분
// const response = await axios.post(
// `${API_URL}​/v1​/users​/email​/sign-up`,
// {
// email: email,
// nickname: name,
// password: password,
// },
// );
// console.log('response:', response.data.data);

// if (!response.data.data) {
// console.log('Error: No return data');
// return;
// }
// const accessToken = response.data.data.accessToken;
// const refreshToken = response.data.data.refreshToken;

// context.setAccessTokenValue(accessToken);
// context.setRefreshTokenValue(refreshToken);
// AsyncStorage.setItem('accessToken', accessToken);
// AsyncStorage.setItem('refreshToken', refreshToken);
const response = await axios.post(`${API_URL}/v1/users/email/sign-up`, {
email: email,
nickname: name,
password: password,
});
console.log('response:', response.data.data);

if (!response.data.data) {
console.log('Error: No return data');
return;
}
const accessToken = response.data.data.token.accessToken;
const refreshToken = response.data.data.token.refreshToken;

context.setAccessTokenValue(accessToken);
context.setRefreshTokenValue(refreshToken);
AsyncStorage.setItem('accessToken', accessToken);
AsyncStorage.setItem('refreshToken', refreshToken);

navigation.navigate('BottomTab');
} catch (error) {
Expand Down Expand Up @@ -160,7 +156,9 @@ export default function SignupScreen() {
</AnimatedButton>
<TextInput
ref={passwordInputRef}
onSubmitEditing={signUp}
onSubmitEditing={async () => {
await signUp();
}}
secureTextEntry={passwordShow}
autoCapitalize="none"
placeholderTextColor={COLOR_GRAY}
Expand Down
33 changes: 20 additions & 13 deletions src/screens/signup/SplashScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,45 +19,52 @@ export default function SplashScreen() {
const navigation = useNavigation();
const context = useContext(AppContext);

//TODO: 저장된 토큰 가져와서 로그인 시도해보는 로직
const tryAutoLogin = async () => {
try {
// AsyncStorage(=디바이스에 저장하는 데이터)에 저장된 토큰을 가져온다.
const accessToken = await AsyncStorage.getItem('accessToken');
const refreshToken = await AsyncStorage.getItem('refreshToken');

if (accessToken == null || refreshToken == null) {
//없으면 그만
console.log('accessToken:', accessToken);
if (accessToken == null) {
return;
}

//TODO: 토큰 로그인 API확인
//토큰으로 로그인 하는 부분
// const response = await axios.get(
// `${API_URL}/hello/security-test`
// );
// console.log('response:', response.data.data);
//토큰이 맞는지 확인 -> 헤더에 토큰 넣어서 백엔드 요청
const response = await axios.get(`${API_URL}/hello/security-test`, {
headers: {Authorization: `Bearer ${accessToken}`},
});
console.log('response:', response.data.data);

// if (!response.data.data) {
// console.log('Error: No return data');
// return;
// }
//토큰이 맞지 않으면 그만
if (!response.data.data) {
console.log('Error: No return data');
return;
}

//토큰이 맞으면 context에 저장하고 화면 이동
context.setAccessTokenValue(accessToken);
context.setRefreshTokenValue(refreshToken);

//화면 이동
navigation.navigate('BottomTab');
} catch (e) {
console.log('error', e);
}
};

// run at first time
// [] 에 state를 넣으면 state가 변경될 때마다 실행된다. 근데 아무것도 없으면 처음 로딩될때만 작동 = 초기화용
useEffect(() => {
tryAutoLogin();
}, []);

//버튼 눌렀을 때의 작동함수
const pressButton = async () => {
navigation.navigate('Login');
};

//이 함수형 컴포넌트가 화면에 보여지는 부분
return (
<View style={styles.entire}>
<Text style={styles.textMain}>먹구스꾸</Text>
Expand Down
Loading