Moved from axios to Fetch API, Added user object to the AuthState

This commit is contained in:
Filip Rojek 2024-05-08 16:31:21 +02:00
parent 89075eb6ae
commit 8e25ca5dd7
3 changed files with 64 additions and 27 deletions

View File

@ -18,7 +18,6 @@ router.get('/', docsController.docs_get);
router.post("/auth/signup",validate(AuthVal.signup) , authController.signup_post); router.post("/auth/signup",validate(AuthVal.signup) , authController.signup_post);
router.post("/auth/signin",validate(AuthVal.signin) , authController.signin_post); router.post("/auth/signin",validate(AuthVal.signin) , authController.signin_post);
router.options("/auth/signin",validate(AuthVal.signin) , authController.signin_post);
router.post("/auth/logout", requireAuth, authController.logout_post); router.post("/auth/logout", requireAuth, authController.logout_post);
router.get("/auth/status", requireAuth, authController.status_get); router.get("/auth/status", requireAuth, authController.status_get);

View File

@ -3,11 +3,13 @@ import { Text, View } from "react-native";
import { useAuth } from "../context/AuthContext"; import { useAuth } from "../context/AuthContext";
export default function Index() { export default function Index() {
const { onLogout } = useAuth(); const { onLogout, authState } = useAuth();
const user = "debil"
const user = authState.user;
return ( return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Welcome {user}</Text> <Text>Welcome {user.username}</Text>
<Text <Text
onPress={() => { onPress={() => {
// The `app/(app)/_layout.tsx` will redirect to the sign-in screen. // The `app/(app)/_layout.tsx` will redirect to the sign-in screen.

View File

@ -1,5 +1,4 @@
import { createContext, useContext, useEffect, useState } from "react"; import { createContext, useContext, useEffect, useState } from "react";
import axios from "axios";
import storageUtil from "./storage"; import storageUtil from "./storage";
const TOKEN_KEY = "my-jwt"; const TOKEN_KEY = "my-jwt";
@ -26,12 +25,17 @@ export function AuthProvider({ children }) {
const token = await storageUtil.getItem(TOKEN_KEY); const token = await storageUtil.getItem(TOKEN_KEY);
console.log(`stored: ${token}`); console.log(`stored: ${token}`);
if (token) { const resUser = await fetch(`${API_URL}/auth/status`, {
axios.defaults.headers.common["Authorization"] = `Bearer ${token}`; credentials: "include",
});
const userData = await resUser.json();
if (token && resUser.status == 200) {
setAuthState({ setAuthState({
token: token, token: token,
authenticated: true, authenticated: true,
user: userData.data,
}); });
return; return;
@ -39,6 +43,7 @@ export function AuthProvider({ children }) {
setAuthState({ setAuthState({
authenticated: false, authenticated: false,
token: null, token: null,
user: null,
}); });
} }
loadToken(); loadToken();
@ -46,49 +51,80 @@ export function AuthProvider({ children }) {
async function register(username, email, password) { async function register(username, email, password) {
try { try {
const res = await axios.post(`${API_URL}/auth/signup`, { const res = await fetch(`${API_URL}/auth/signup`, {
username, method: 'POST',
email, credentials: 'include',
password, headers: {
}); "Content-Type": "application/json"
return res },
body: JSON.stringify({
username,
email,
password
})
})
return res;
} catch (err) { } catch (err) {
return { error: true, msg: err.response.data}; return { error: true, msg: err.response.data };
} }
} }
async function login(email, password) { async function login(email, password) {
try { try {
const res = await axios.post(`${API_URL}/auth/signin`, { const resLogin = await fetch(`${API_URL}/auth/signin`, {
email, method: "POST",
password, credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password,
}),
}); });
const loginData = await resLogin.json();
const resUser = await fetch(`${API_URL}/auth/status`, {
credentials: "include",
});
if (resUser.status != 200) {
throw Error("user does not have user data");
}
const userData = await resUser.json();
setAuthState({ setAuthState({
token: res.data.data.jwt, token: loginData.data.jwt,
authenticated: true, authenticated: true,
user: userData.data,
}); });
//axios.defaults.headers.common[ await storageUtil.setItem(TOKEN_KEY, loginData.data.jwt);
// "Authorization"
//] = `Bearer ${res.data.data.jwt}`;
await storageUtil.setItem(TOKEN_KEY, res.data.data.jwt);
return res
} catch (err) { } catch (err) {
console.error("Failed to log in", err)
return { error: true, msg: err.res }; return { error: true, msg: err.res };
} }
} }
async function logout() { async function logout() {
await storageUtil.delItem(TOKEN_KEY); let res = await fetch(`${API_URL}/auth/logout`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({}),
});
res = await res.json();
axios.defaults.headers.common["Authorization"] = ""; await storageUtil.delItem(TOKEN_KEY);
setAuthState({ setAuthState({
token: null, token: null,
authenticated: false, authenticated: false,
user: null,
}); });
} }