I have problem using useReducer with useContext in Next.js. I want to use the token that the user have already make with useReducer and useContext, but when I try it is undefined. I don't know what should I do?
This is my code file:
This is my AuthToken.js file:
import React, { createContext, useEffect, useReducer } from 'react';
// Create context
export const AuthToken = createContext();
const initialState = {
auth: {},
user: []
};
const ACTIONS = {
AUTH: "AUTH",
ADD_USERS: "ADD_USERS"
};
const reducer = (stateAuth, action) => {
switch(action.type) {
case ACTIONS.AUTH:
return {
...stateAuth,
auth: action.payload
};
case ACTIONS.ADD_USERS:
return {
...stateAuth,
user: action.payload
};
default:
return stateAuth;
};
};
export function DataProvider({children}) {
const {stateAuth, dispatchAuth} = useReducer(reducer, initialState);
useEffect(() => {
const firstLogin = localStorage.getItem("firstLogin");
if (firstLogin === true) {
async (token) => {
const res = await fetch("http://localhost:3000/api/users/", {
method: "GET",
headers: {
"Authorization": token
}
});
await res.json().then(res => {
res.err ? localStorage.removeItem("firstLogin") : dispatchAuth({
type: ACTIONS.AUTH,
payload: {
token: res.accessToken,
user: res.user
}
});
});
};
};
}, []);
return (
<AuthToken.Provider value={{stateAuth, dispatchAuth}}>
{children}
</AuthToken.Provider>
);
};
This code for get the token from api folder in Next.js (anyway I'm using next-connect):
import dbConnect from '../../../utils/dbConnect';
import User from '../../../model/User';
import handler from '../../../components/handler';
import { hash } from 'bcrypt';
import jwt from 'jsonwebtoken';
import { createAccessToken } from "../../../utils/generateToken";
dbConnect();
export default handler.get(async (req, res) => {
try {
const token = req.cookies.auth;
if (!token) return res.status(400).json({ message: "Please Login To Get Access" });
const result = jwt.verify(token, process.env.JWT_REFRESH_TOKEN);
if (!result) return res.status(400).json({ message: "Token Has Been Expired" });
const user = await User.findById(result.userId);
if (!user) return res.status(400).json({ message: "User Does Not Exist" });
const accessToken = createAccessToken({ id: user._id });
res.status(200).json({ accessToken, user: {
userId: user._id,
myUserName: user.nama,
myUserEmail: user.email
}});
} catch(err) {
res.status(500).json({ message: "Server Error", err: err.message });
};
})
This is my _app.js:
import "../styles/globals.css";
import { DataProvider } from "../utils/AuthToken";
function MyApp({ Component, pageProps }) {
return (
<DataProvider>
<Component {...pageProps} />
</DataProvider>
);
};
export default MyApp
And this is my index.js (I want use the token here):
import React, { useContext } from 'react';
import Head from 'next/head';
import { AuthToken } from "../utils/AuthToken";
function Home() {
const { stateAuth, dispatchAuth } = useContext(AuthToken);
console.log(stateAuth, dispatchAuth); // When i console log it i get undefined for both of them. That's my problem is.
return (
<React.Fragment>
<Head>
<title>Try useContext and useReducer</title>
<meta name="icon" href="/favicon.ico" />
</Head>
</React.Fragment>
);
};
export default Home;
This is my problem: console.log on the browser gets undefined.
