{"id":77960,"date":"2024-09-25T10:59:31","date_gmt":"2024-09-25T07:29:31","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/session-state-management-js-react-49fg\/"},"modified":"2024-09-25T10:59:31","modified_gmt":"2024-09-25T07:29:31","slug":"session-state-management-js-react-49fg","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/session-state-management-js-react-49fg\/","title":{"rendered":"\u062c\u0644\u0633\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a\u06cc | JS | \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang <\/p>\n

\u0645\u0642\u062f\u0645\u0647<\/p>\n

\u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0644\u0633\u0647 \u0645\u0633\u0626\u0648\u0644 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0627\u0635 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06cc\u0627 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0627\u0633\u062a. \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0628\u060c \u00ab\u062c\u0644\u0633\u0647\u00bb \u0628\u0647 \u062f\u0648\u0631\u0647\u200c\u0627\u06cc \u0627\u0637\u0644\u0627\u0642 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u062f\u0631 \u0637\u06cc \u0622\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0637\u0648\u0631 \u0641\u0639\u0627\u0644 \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0631\u062f\u060c \u0627\u0632 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0633\u06cc\u0633\u062a\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u0648 \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u062e\u0627\u0631\u062c \u0645\u06cc\u200c\u0634\u0648\u062f \u06cc\u0627 \u067e\u0633 \u0627\u0632 \u0645\u062f\u062a\u06cc \u0639\u062f\u0645 \u0641\u0639\u0627\u0644\u06cc\u062a \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0645\u06cc\u200c\u0631\u0633\u062f.<\/p>\n

\u0627\u0646\u0648\u0627\u0639 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0644\u0633\u0627\u062a<\/p>\n

\u06a9\u0648\u06a9\u06cc \u0647\u0627: \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0630\u062e\u06cc\u0631\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631.
\n\u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u062d\u0644\u06cc\/\u0630\u062e\u06cc\u0631\u0647\u200c\u0633\u0627\u0632\u06cc \u062c\u0644\u0633\u0647: \u0631\u0648\u0634 \u0647\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0648\u0628 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631.
\nJWT (JSON Web Tokens): \u0631\u0648\u0634\u06cc \u0628\u062f\u0648\u0646 \u062d\u0627\u0644\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0644\u0633\u0627\u062a \u0628\u0627 \u062a\u0648\u06a9\u0646 \u0647\u0627\u06cc \u0631\u0645\u0632\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647.
\n\u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0647\u0627\u06cc \u062c\u0644\u0633\u0647 \u0633\u0645\u062a \u0633\u0631\u0648\u0631: \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0646\u0634\u0633\u062a \u062f\u0627\u0626\u0645\u06cc \u062f\u0631 \u0633\u0631\u0648\u0631\u06cc \u06a9\u0647 \u062c\u0644\u0633\u0627\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0644\u0633\u0627\u062a \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 React<\/p>\n

\u06a9\u0648\u06a9\u06cc \u0647\u0627<\/p>\n

\u06a9\u0648\u06a9\u06cc\u200c\u0647\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f \u062a\u0627 \u067e\u0633 \u0627\u0632 \u06cc\u06a9 \u0632\u0645\u0627\u0646 \u062e\u0627\u0635 \u0645\u0646\u0642\u0636\u06cc \u0634\u0648\u0646\u062f. \u0622\u0646\u0647\u0627 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0644\u0633\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f \u0632\u06cc\u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u062a\u0646\u0638\u06cc\u0645 \u0634\u0648\u0646\u062f \u0648 \u0628\u0627 \u0647\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0647 \u0633\u0631\u0648\u0631 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0631\u0633\u0627\u0644 \u0634\u0648\u0646\u062f.<\/p>\n

\/\/ Setting a cookie
\ndocument.cookie = “sessionId=9808@#45; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=\/login”;<\/p>\n

\/\/ Reading a cookie
\nconst cookies = (cookieValue) => {
\n return cookieValue.split(‘; ‘).reduce((acc, cookie) => {
\n const [key, value] = cookie.split(‘=’);
\n acc[key] = value;
\n return acc;
\n }, {});
\n}<\/p>\n

const cookieObj = cookies(cookie)<\/p>\n

console.log(cookieObj.sessionId) \/\/ 9808@#45
\nconsole.log(cookieObj.expires) \/\/ Fri, 31 Dec 2024 23:59:59 GMT
\nconsole.log(cookieObj.path) \/\/ \/login<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0645\u062d\u0644\u06cc \u0648 \u062c\u0644\u0633\u0647<\/p>\n

localStorage \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u062f\u0631 \u062c\u0644\u0633\u0627\u062a \u0645\u0631\u0648\u0631\u06af\u0631 \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u062f.
\nsessionStorage \u0641\u0642\u0637 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u062a \u062c\u0644\u0633\u0647 \u0635\u0641\u062d\u0647 (\u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0631\u06af\u0647 \u06cc\u0627 \u067e\u0646\u062c\u0631\u0647 \u0628\u0633\u062a\u0647 \u0634\u0648\u062f) \u062d\u0641\u0638 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\/\/ React Example
\nimport React from “react”;
\nimport { useState } from “react”;
\nimport { useEffect } from “react”;<\/p>\n

const Hero = () => {
\n \/\/ Accessing theme from localStorage for initial state
\n const [theme, setTheme] = useState(
\n localStorage.getItem(“theme”) === “dark” ? “dark” : “light”
\n );<\/p>\n

useEffect(() => {
\n \/\/ Updating local storage if theme state is changed
\n localStorage.setItem(“theme”, theme);
\n }, [theme]);<\/p>\n

\/\/ Toggling theme between dark and light
\n const toggleTheme = () => {
\n setTheme(theme === “dark” ? “light” : “dark”);
\n };<\/p>\n

return (
\n <section className={`${theme === “dark” ? “bg-gray-900” : “”} text-white`}>
\n <div className=”mx-auto px-4 py-32 lg:flex lg:h-screen lg:items-center lg:justify-between max-w-[1200px]”>
\n <h1>Theme Change Example<\/h1>
\n <button
\n className=”fixed top-4 right-4 rounded bg-blue-600 p-2 text-white hover:bg-transparent hover:text-white focus:outline-none focus:ring”
\n onClick={toggleTheme}
\n >
\n {theme === “dark” ? ” ” : ” “}
\n <\/button>
\n <\/div>
\n <\/section>
\n );
\n};<\/p>\n

export default Hero;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a JWT<\/p>\n

\u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a JWT \u06cc\u06a9 \u0645\u06a9\u0627\u0646\u06cc\u0633\u0645 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u062f\u0648\u0646 \u062d\u0627\u0644\u062a \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u062a\u0648\u06a9\u0646 \u0627\u0633\u062a.<\/p>\n

\/\/ Manually setting tokens for login
\nconst login = async (username, password) => {
\n const response = await fetch(‘https:\/\/example.com\/api\/login’, {
\n method: ‘POST’,
\n headers: {
\n ‘Content-Type’: ‘application\/json’,
\n },
\n body: JSON.stringify({ username, password }),
\n });<\/p>\n

const data = await response.json();
\n localStorage.setItem(‘token’, data.token);
\n};<\/p>\n

\/\/ Checking tokens with Authorization headers
\nconst getProtectedData = async () => {
\n const token = localStorage.getItem(‘token’);
\n const response = await fetch(‘https:\/\/example.com\/api\/protected’, {
\n method: ‘GET’,
\n headers: {
\n ‘Authorization’: `Bearer ${token}`,
\n },
\n });<\/p>\n

const protectedData = await response.json();
\n return protectedData
\n};<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f\u060c \u0633\u0631\u0648\u0631 \u06cc\u06a9 JWT \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.
\n\u0645\u0634\u062a\u0631\u06cc JWT \u0631\u0627 \u062f\u0631 localStorage \u06cc\u0627 sessionStorage \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.
\n\u062f\u0631 \u0647\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0647 \u06cc\u06a9 \u0645\u0646\u0628\u0639 \u0645\u062d\u0627\u0641\u0638\u062a \u0634\u062f\u0647\u060c \u0645\u0634\u062a\u0631\u06cc JWT \u0631\u0627 \u062f\u0631 \u0647\u062f\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.
\n\u0645\u0646\u0628\u0639 – https:\/\/www.npmjs.com\/package\/react-jwt <\/p>\n

\u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0644\u0633\u0647 \u062f\u0631 Next.js<\/p>\n

\u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0644\u0633\u0647 \u062f\u0631 Next.js \u0628\u0647 \u062f\u0644\u06cc\u0644 \u062a\u0631\u06a9\u06cc\u0628 \u0632\u0645\u06cc\u0646\u0647 \u0647\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u0648 \u0633\u0631\u0648\u0631 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0642\u0648\u06cc \u062a\u0631 \u0628\u0627\u0634\u062f. \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u062a\u062f\u0627\u0648\u0644 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0644\u0633\u0627\u062a \u062f\u0631 Next.js \u0634\u0627\u0645\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0648\u06a9\u06cc \u0647\u0627\u060c JWT \u0647\u0627 \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0634\u062e\u0635 \u062b\u0627\u0644\u062b \u0627\u0633\u062a. \u0645\u0627 \u0642\u0628\u0644\u0627 \u0631\u0648\u06cc\u06a9\u0631\u062f \u06a9\u0648\u06a9\u06cc\u200c\u0647\u0627 \u0648 JWT \u0631\u0627 \u062f\u06cc\u062f\u0647\u200c\u0627\u06cc\u0645 \u0648 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0634\u062e\u0635 \u062b\u0627\u0644\u062b \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 next-auth\u060c \u06a9\u0647 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc Next.js \u0627\u0633\u062a \u06a9\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062c\u0644\u0633\u0647 \u0631\u0627 \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n

\u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062c\u0644\u0633\u0647: \u062c\u0644\u0633\u0627\u062a \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u062f\u0631 JWT (\u0628\u0631\u0627\u06cc \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0628\u062f\u0648\u0646 \u062d\u0627\u0644\u062a) \u06cc\u0627 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0631\u062f.
\n\u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u062c\u0644\u0633\u0627\u062a: Next-auth \u0627\u0646\u0642\u0636\u0627\u060c \u062a\u0645\u062f\u06cc\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062c\u0644\u0633\u0647 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0646\u0635\u0628 \u0648 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc<\/p>\n

npm install next-auth<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u0639\u062a\u0628\u0627\u0631 Github<\/p>\n

import NextAuth from “next-auth”
\nimport GithubProvider from “next-auth\/providers\/github”<\/p>\n

export const authOptions = {
\n \/\/ Configure one or more authentication providers
\n providers: [
\n GithubProvider({
\n clientId: process.env.GITHUB_ID,
\n clientSecret: process.env.GITHUB_SECRET,
\n }),
\n ],
\n}<\/p>\n

const handler = NextAuth(authOptions)<\/p>\n

export { handler as GET, handler as POST }<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u0647 \u062c\u0644\u0633\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647<\/p>\n

“use client”;
\nimport { SessionProvider } from “next-auth\/react”
\nimport React from “react”;<\/p>\n

const SessionWrapper = ({children}:{children:React.ReactNode}) => {
\n return <SessionProvider>{children}<\/SessionProvider>
\n}
\nexport default SessionWrapper<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc Layout \u0628\u0627 SessionWrapper<\/p>\n

import “.\/globals.css”;
\nimport Navbar from “@\/components\/Navbar”;
\nimport Footer from “@\/components\/Footer”;
\nimport SessionWrapper from “@\/components\/SessionWrapper”;<\/p>\n

export default function RootLayout({
\n children,
\n}: Readonly<{
\n children: React.ReactNode;
\n}>) {
\n return (
\n <html lang=”en”>
\n <body>
\n <SessionWrapper>
\n <Navbar \/>
\n <main>{children}<\/main>
\n <Footer \/>
\n <\/SessionWrapper>
\n <\/body>
\n <\/html>
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u0648\u0636\u0639\u06cc\u062a \u062c\u0644\u0633\u0647<\/p>\n

import { useSession } from “next-auth\/react”<\/p>\n

export default function Component() {
\n const { data: session, status } = useSession()<\/p>\n

if (status === “authenticated”) {
\n return <p>Signed in as {session.user.email}<\/p>
\n }<\/p>\n

return <a href=”\/api\/auth\/signin”>Sign in<\/a>
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0627\u062f\u0647: \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0633\u0647 \u0645\u0642\u062f\u0627\u0631 \u0628\u0627\u0634\u062f: Session \/ undefined \/ null.
\n\u0648\u0642\u062a\u06cc \u062c\u0644\u0633\u0647 \u0647\u0646\u0648\u0632 \u0648\u0627\u06a9\u0634\u06cc \u0646\u0634\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u062f\u0627\u062f\u0647 \u0647\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0646\u0634\u062f\u0647 \u062e\u0648\u0627\u0647\u0646\u062f \u0628\u0648\u062f
\n\u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0646\u062a\u0648\u0627\u0646\u062f \u062c\u0644\u0633\u0647 \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u062f\u060c \u062f\u0627\u062f\u0647 \u0647\u0627 \u067e\u0648\u0686 \u062e\u0648\u0627\u0647\u0646\u062f \u0628\u0648\u062f
\n\u062f\u0631 \u0635\u0648\u0631\u062a \u0645\u0648\u0641\u0642\u06cc\u062a\u060c \u062f\u0627\u062f\u0647 \u0647\u0627 Session \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f.
\n\u0648\u0636\u0639\u06cc\u062a: \u0646\u06af\u0627\u0634\u062a enum \u0628\u0647 \u0633\u0647 \u062d\u0627\u0644\u062a \u062c\u0644\u0633\u0647 \u0645\u0645\u06a9\u0646: “\u0628\u0627\u0631\u06af\u06cc\u0631\u06cc” | “\u062a\u0623\u06cc\u06cc\u062f \u0634\u062f\u0647” | “\u063a\u06cc\u0631 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a”<\/p>\n

\u0647\u06cc\u062f\u0631\u0627\u062a\u0627\u0633\u06cc\u0648\u0646 \u062d\u0627\u0644\u062a<\/p>\n

Hydration \u0641\u0631\u0622\u06cc\u0646\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0622\u0646 HTML \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0637 React \u0628\u0631 \u0631\u0648\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a “\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f” \u0645\u06cc \u0634\u0648\u062f \u0648 React \u0645\u0646\u0637\u0642 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062e\u0648\u062f \u0631\u0627 (\u0645\u062b\u0644\u0627\u064b \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a) \u0628\u0647 HTML \u0645\u0648\u062c\u0648\u062f \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f.
\n\u062f\u0631 Next.js\u060c \u0647\u06cc\u062f\u0631\u0627\u062a\u0627\u0633\u06cc\u0648\u0646 \u062d\u0627\u0644\u062a \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0635\u0641\u062d\u0647 \u0627\u06cc \u062a\u0648\u0633\u0637 \u0633\u0631\u0648\u0631 \u0631\u0646\u062f\u0631 \u0645\u06cc \u0634\u0648\u062f\u060c \u0627\u0632 \u0642\u0628\u0644 \u0628\u0627 HTML \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0631\u0646\u062f\u0631 \u0645\u06cc \u0634\u0648\u062f\u060c \u0627\u0645\u0627 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0627 \u0628\u0647 \u062f\u0633\u062a \u06af\u0631\u0641\u062a\u060c \u0628\u0631\u0646\u0627\u0645\u0647 React \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0627\u06cc\u062f \u0622\u0646 HTML \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u06af\u06cc\u0631\u062f \u0648 \u0628\u0627 \u067e\u06cc\u0648\u0633\u062a \u06a9\u0631\u062f\u0646 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u060c \u0634\u0631\u0648\u0639 \u0645\u062c\u062f\u062f \u062d\u0627\u0644\u062a\u060c \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0645\u062a \u0633\u0631\u0648\u06cc\u0633 \u06af\u06cc\u0631\u0646\u062f\u0647 \u0628\u0627 HTML \u0627\u0632 \u067e\u06cc\u0634 \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u062f\u0631\u0633\u062a \u0631\u0641\u062a\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0622\u0646 \u0631\u0627 “\u0647\u06cc\u062f\u0631\u0627\u062a\u0647” \u06a9\u0646\u06cc\u062f.
\n\u0627\u06af\u0631 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627 \u0628\u0647 \u062d\u0627\u0644\u062a \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0648\u0627\u0628\u0633\u062a\u0647 \u0628\u0627\u0634\u0646\u062f\u060c \u0647\u06cc\u062f\u0631\u0627\u062a\u0627\u0633\u06cc\u0648\u0646 \u0646\u06cc\u0632 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0631\u062e \u062f\u0647\u062f.
\n\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a<\/p>\n

“use client”;
\nimport ProfileCard from “.\/ProfileCard”;
\nimport BlogsFetch from “.\/BlogsFetch”;
\nimport { useMarkdownStore } from “@\/store\/useStore”;<\/p>\n

const ProfileSection = () => {
\n const user = useMarkdownStore((state) => state.user);<\/p>\n

return (
\n <div className=”flex flex-col lg:flex-row justify-center lg:justify-start gap-5 lg:gap-10 px-5″>
\n <ProfileCard user={user} \/>
\n <BlogsFetch userId={user.uid as string} \/>
\n <\/div>
\n );
\n};<\/p>\n

export default ProfileSection;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u062a\u063a\u06cc\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0627\u0632 zustand \u0627\u0634\u0627\u0631\u0647 \u062f\u0627\u0631\u062f \u06a9\u0647 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062f\u0648\u0644\u062a\u06cc \u0627\u0633\u062a. \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0646\u0627\u0647\u0645\u06af\u0627\u0645 \u0627\u0633\u062a \u0648 \u062a\u0648\u0633\u0637 \u0645\u0624\u0644\u0641\u0647 BlogsFetch \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0627\u0632 \u0627\u06cc\u0646 user.uid \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0627\u0645\u0627 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0648\u0642\u062a\u06cc \u0645\u0624\u0644\u0641\u0647 \u0646\u0635\u0628 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u06a9\u0627\u0631\u0628\u0631 null \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f \u0648 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u062e\u0627\u0644\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f \u0632\u06cc\u0631\u0627 \u0648\u0636\u0639\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u0647\u06cc\u062f\u0631\u0627\u062a\u0647 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.
\n\u0628\u0631\u0627\u06cc \u0631\u0641\u0639 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644\u060c \u0628\u0627\u06cc\u062f \u0645\u0646\u062a\u0638\u0631 \u0628\u0645\u0627\u0646\u06cc\u0645 \u062a\u0627 \u0648\u0636\u0639\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631\u06cc \u0647\u06cc\u062f\u0631\u0627\u062a\u0647 \u0634\u0648\u062f \u0648 \u0633\u067e\u0633 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n

const queryInfinite = useInfiniteQuery({
\n queryKey: userId ? [“blogs”, userId] : [“blogs”],
\n queryFn: () =>
\n userId
\n ? getUserBlogsFromDb(userId, lastDoc)
\n : getBlogsFromDb(filters, lastDoc),
\n initialPageParam: undefined,
\n getPreviousPageParam: (firstPage) => firstPage.firstVisibleDoc,
\n getNextPageParam: (lastPage) => lastPage.lastVisibleDoc,
\n enabled: userId ? true : false,
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0627 \u0627\u0632 react query \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u062c\u0647\u0634 \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0627\u06cc\u0646 1 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0646\u0627\u0645 enabled \u062f\u0627\u0631\u062f \u06a9\u0647 \u067e\u0633 \u0627\u0632 \u0622\u0645\u0627\u062f\u0647 \u0634\u062f\u0646 \u0648 \u0647\u06cc\u062f\u0631\u0627\u062a\u0647 \u0634\u062f\u0646 \u062d\u0627\u0644\u062a userId \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0627\u0632 \u0637\u0631\u0641 \u062f\u06cc\u06af\u0631\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 userId \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0639\u0645\u0644\u06cc\u0627\u062a \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0622\u0645\u0627\u062f\u0647 \u0634\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0642\u0644\u0627\u0628 useEffect \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u062c\u062f\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0645\u0646\u0627\u0628\u0639<\/p>\n

https:\/\/next-auth.js.org\/getting-started\/introduction <\/p>\n

https:\/\/tanstack.com\/query\/latest <\/p>\n

https:\/\/swr.vercel.app\/ <\/p>\n

https:\/\/github.com\/pmndrs\/zustand <\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u067e\u0633\u062a \u062a\u0645\u0627\u0645 \u0634\u062f\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0645\u0646 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f –<\/p>\n

\u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645 – https:\/\/www.instagram.com\/supremacism__shubh\/\u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646 – https:\/\/www.linkedin.com\/in\/shubham-tiwari-b7544b193\/\u0627\u06cc\u0645\u06cc\u0644 – shubhmtiwri00@gmail.com<\/p>\n

\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0644\u06cc\u0646\u06a9 \u0632\u06cc\u0631 \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u06a9\u0646\u06cc\u062f \u0628\u0627 \u062a\u0634\u06a9\u0631\ud83d\udc47\ud83d\udc47https:\/\/www.buymeacoffee.com\/waaduheck<\/p>\n

\u0627\u06cc\u0646 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n

\n
\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n