Next.js Discord

Discord Forum

Updating info doesn't effect the current session's state

Answered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
  const handleUpdate = async () => {
    setError(''); 
    setSuccess(''); 
    if (!firstName || !lastName) {
      setError('Please fill out all the forms');
      return;
    }
  
    if (!session?.accessToken) {
      setError('No token found. Please login again.');
      return;
    }
  
    try {
      
      setLoading(true);

      const updates = {
        first_name: firstName,
        last_name: lastName,
        email: email.toLowerCase(),
      };
  

      const response = await updateUserInfo(session.accessToken, updates);
  

      if (!response.result) {
        if (response.data) {
          const errorMessages = Object.values(response.data)
            .flat()
            .join(', ');
          setError(errorMessages || response.messages || 'There is a problem');
        } else {
          setError(response.messages || 'There is a problem');
        }
        setSuccess('');
        return; 
      }
  
      setError('');
      
      const userInfoResponse = await getUserInfo(session.accessToken);
      const data = userInfoResponse.data;
      
      setUser(data);
      setFirstName(data.first_name || '');
      setLastName(data.last_name || '');
      setEmail(data.email || '');


      setSuccess('Info updated successfully');

    } catch (err: any) {
      console.error('Error updating user info:', err);
  
      if (err.response && err.response.data) {
        const errorMessages = Object.values(err.response.data.data)
          .flat()
          .join(', ');
        setError(errorMessages || 'There is a problem.');
      } else {
        setError('There is a problem');
      }
      setSuccess('');
    } finally {
      setLoading(false);
    }
  };


I want to force users to fill out their last and first name before they can do anything, I achieve this using Middleware, But when the users fill out their info the session doesn't get affected and keeps the last and first name as null, How can I make it update in the session too?
Answered by Australian Freshwater Crocodile
export async function updateUserInfo(token: string, updates: { first_name?: string; last_name?: string; email?: string | null }) {
  let response = await fetch(`${API_BASE_URL}/auth/change`, {
    method: 'PUT',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(updates),
  });

  if (response.status === 401) {
    response = await refreshAndRetry(token, `${API_BASE_URL}/auth/change`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updates),
    });
  }

  const data = await response.json();
  return data;
}
View full answer

43 Replies

Australian Freshwater CrocodileOP
It doesn't allow the users to visit another page unless they re-login (so the session gets updated)
@Australian Freshwater Crocodile tsx const handleUpdate = async () => { setError(''); setSuccess(''); if (!firstName || !lastName) { setError('Please fill out all the forms'); return; } if (!session?.accessToken) { setError('No token found. Please login again.'); return; } try { setLoading(true); const updates = { first_name: firstName, last_name: lastName, email: email.toLowerCase(), }; const response = await updateUserInfo(session.accessToken, updates); if (!response.result) { if (response.data) { const errorMessages = Object.values(response.data) .flat() .join(', '); setError(errorMessages || response.messages || 'There is a problem'); } else { setError(response.messages || 'There is a problem'); } setSuccess(''); return; } setError(''); const userInfoResponse = await getUserInfo(session.accessToken); const data = userInfoResponse.data; setUser(data); setFirstName(data.first_name || ''); setLastName(data.last_name || ''); setEmail(data.email || ''); setSuccess('Info updated successfully'); } catch (err: any) { console.error('Error updating user info:', err); if (err.response && err.response.data) { const errorMessages = Object.values(err.response.data.data) .flat() .join(', '); setError(errorMessages || 'There is a problem.'); } else { setError('There is a problem'); } setSuccess(''); } finally { setLoading(false); } }; I want to force users to fill out their last and first name before they can do anything, I achieve this using Middleware, But when the users fill out their info the session doesn't get affected and keeps the last and first name as null, How can I make it update in the session too?
B33fb0n3
Please share this function:
const response = await updateUserInfo(session.accessToken, updates);
@B33fb0n3 Please share this function: const response = await updateUserInfo(session.accessToken, updates);
Australian Freshwater CrocodileOP
export async function updateUserInfo(token: string, updates: { first_name?: string; last_name?: string; email?: string; }) {
  let response = await fetch(`${API_BASE_URL}/auth/change`, {
    method: 'PUT',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(updates),
  });

  if (response.status === 401) {
    response = await refreshAndRetry(token, `${API_BASE_URL}/auth/change`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updates),
    });
  }

  const data = await response.json();
  return data;
}
Separate backend
with Django
@Australian Freshwater Crocodile Separate backend
B33fb0n3
Do you own the backend? Can you influence the backend?
@B33fb0n3 Do you own the backend? Can you influence the backend?
Australian Freshwater CrocodileOP
No I need to tell my friend to make changes
Is this related to backend?
B33fb0n3
well.. when the backend does not give you a new jwt token (ig it's jwt) then yes, the backend need to return the new jwt token (that contains the updated information)
wait lemme check
{
  "result": true,
  "messages": "با موفقیت تغییر کرد",
  "data": {
    "id": 4,
    "first_name": "GAN",
    "last_name": "NGA",
    "email": "user@example.com"
  }
This is the response
Only way is the token?
Isn't it a little hard to handle😅 There should be a better solution
B33fb0n3
he may return you the updated information, but the backend need to set the cookie for it. The jwt is normally signed. And only the backend can sign the new jwt. So only the backend can set the new cookie (jwt) to your browser
B33fb0n3
@Australian Freshwater Crocodile solved?
@B33fb0n3 <@442728361970892801> solved?
Australian Freshwater CrocodileOP
No still waiting for the backend dev to update the code 😭
@B33fb0n3 <@442728361970892801> solved?
Australian Freshwater CrocodileOP
Umm
backend dev added this to generate a new token
And I set it in session
export async function updateUserInfo(token: string, updates: { first_name?: string; last_name?: string; email?: string | null }) {
  let response = await fetch(`${API_BASE_URL}/auth/change`, {
    method: 'PUT',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(updates),
  });

  if (response.status === 401) {
    response = await refreshAndRetry(token, `${API_BASE_URL}/auth/change`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updates),
    });
  }

  const data = await response.json();
  return data;
}




async function updateSessionToken(newAccessToken: string) {
  const session = await getSession();
  if (!session) return;

  await signIn('credentials', {
    redirect: false,
    accessToken: newAccessToken, 
    user: session.user, 
  });
}
like this
but its not still working
Its working just like the login system
B33fb0n3
maybe I missed the line inside your shared code. Can you highlight it for me?
@B33fb0n3 maybe I missed the line inside your shared code. Can you highlight it for me?
Australian Freshwater CrocodileOP
async function updateSessionToken(newAccessToken: string) {
  const session = await getSession();
  if (!session) return;

  await signIn('credentials', {
    redirect: false,
    accessToken: newAccessToken, 
    user: session.user, 
  });
}
I'm trying to login again here
And this initiates the update session : 
  if (data.access_token) {
    await updateSessionToken(data.access_token);
  }
Australian Freshwater CrocodileOP
Oh wait
Australian Freshwater CrocodileOP
export async function updateUserInfo(token: string, updates: { first_name?: string; last_name?: string; email?: string | null }) {
  let response = await fetch(`${API_BASE_URL}/auth/change`, {
    method: 'PUT',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(updates),
  });

  if (response.status === 401) {
    response = await refreshAndRetry(token, `${API_BASE_URL}/auth/change`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(updates),
    });
  }

  const data = await response.json();
  return data;
}
Answer
Australian Freshwater CrocodileOP
Damn
I mixed up the updateUserAddress with updateUserInfo
damn
wait
Australian Freshwater CrocodileOP
Nvm its messed up
I'll just log out the user and ask them to login again lol
Thank you