React / NextJS - Anonymous Sessions / global data

My goal is to use a client component to capture the IP and userAgent information. I have that working now. But it only works on a client component. My server components need to know this information as well.

Can I put that in an anonymous session somehow. Then my server components and client components can see this information as needed for writing log entries, etc.

I have next-auth setup. I just don’t know anything about anonymous sessions or if servers can see cookies or how to share that information to all my client and server pages.

I know it’s possible. Just no clue how. Anyone have any ideas?


Try 1 capturing IP address and user agent information in the client component using JavaScript.
Then create an anonymous session object to store the captured information.
Store the anonymous session object in a client-side storage mechanism like cookies.
When making server-side requests, attach the anonymous session object to the request headers or body.
Extract the anonymous session object from the incoming request in your server-side code.
And that’s all, you can access the captured IP address and user agent information from the server components.strong text

I have an api that returns the ip and userAgent data to a client-side component.

While this is not an ideal solution, I created a client component that calls that and collects the data. Then, along with some props, updates my log file with the data I need. That works well, but only works as a react client component, so far.

That means to use it for logging, I have a component. It can be pulled into any server side component so it creates good log entries.

The downside is that it only works as a component, so it cannot be called (as far as I know) from the code portions of components. So to record a programmatic problem, I have to render my page regardless and then pass the error message to this component. It feels hacky, but it does work and I get the accurate report of ip, userAgent, props, and whatever else I need.

I’ll continue to explore ways to implement something that ties the client session to the user session. Unfortunately, next-auth doesn’t seem to easily support anonymous sessions and I’m not sure how to implement sessions another way - not yet.

Thanks for the suggestions. I’m certain I’ll sort that out soon. But at least I have a version that works and tracks every user interaction with my website whether they log in or not.


The project –

It’s designed to help users find airports, timezones, hubs, phone numbers, websites, etc. Designed as a tool for travel agents and airline workers. Always open to suggestions for features.

This is quite clear , thx!

Here’s a basic example using JavaScript on the client side (assuming you’re using a browser):
// Function to get IP address and User-Agent
function captureInfo() {
const ipAddress = fetch(‘’)
.then(response => response.json())
.then(data => data.ip);

const userAgent = navigator.userAgent;

return { ipAddress, userAgent };


// Store information in session storage
const info = captureInfo();
sessionStorage.setItem(‘clientInfo’, JSON.stringify(info));

Then, on the server side (assuming you’re using Node.js with Express.js), you can access this information in your route handlers:
const express = require(‘express’);
const app = express();


app.get(‘/some-route’, (req, res) => {
// Extract IP address and User-Agent from request headers
const ipAddress = req.headers[‘x-forwarded-for’] || req.connection.remoteAddress;
const userAgent = req.headers[‘user-agent’];

// Log or use this information as needed
console.log('IP Address:', ipAddress);
console.log('User-Agent:', userAgent);

// Your route handling logic here


app.listen(3000, () => console.log(‘Server started’));

Remember to handle security considerations, such as ensuring that the IP address is properly validated and sanitized on the server-side to prevent any potential security vulnerabilities. Additionally, consider the privacy implications of storing and using IP addresses and User-Agent information.