HowTo: Aquire req.ip from express server within _app.js? - reactjs

Question

OS: Windows 10 Pro.
Next: 8.1.0.
Express server: 4.16.4.
So, I'm attempting to access the ctx.req property, from a custom express server, so as to gain access to req.ip, which I utilise around the site using react context, but am getting an undefined value response. How do I resolve this?
My code is as follows:
Usercontext.js
import { createContext } from 'react';
const UserContext = createContext();
export default UserContext;
_app.js
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
// this exposes the query to the user
pageProps.query = ctx.query;
pageProps.req = ctx.req; // This line causes the site to break
return { pageProps };
}
render() {
const { Component, apollo, pageProps } = this.props;
return (
<Container>
<ApolloProvider client={apollo}>
<UserContext.Provider value={{ userip: pageProps.req }}>
<Page>
<Component {...pageProps} />
</Page>
</UserContext.Provider>
</ApolloProvider>
</Container>
);
}
}
And I access the value in each required component as follows:
const somePageComponent = props => {
const { userip } = useContext(UserContext);
}
I initially attempted to do pageProps.req = ctx.req, in _app.js, but that causes an Error: Circular structure in "getInitialProps" result of page "/_error" to occur
Server.js
const app = next({ dev })
const handle = app.getRequestHandler()
const ssrCache = cacheableResponse({
ttl: 1000 * 60 * 60, // 1hour
get: async ({ req, res, pagePath, queryParams }) => ({
data: await app.renderToHTML(req, res, pagePath, queryParams)
}),
send: ({ data, res }) => res.send(data)
})
server.set('trust proxy', true);
// Header security. See: https://observatory.mozilla.org/
server.use(helmet());
// Sets "Referrer-Policy: same-origin".
server.use(helmet.referrerPolicy({ policy: 'same-origin' }));
// Sets Feature-policy
server.use(helmet.featurePolicy({
features: {
fullscreen: ["'self'"],
vibrate: ["'none'"],
payment: ['https://yyy.com'],
syncXhr: ["'self'"],
geolocation: ["'self'"]
}
}));
app.prepare().then(() => {
//const server = express()
server.get('*', function(req,res,next) {
if(req.headers['x-forwarded-proto'] != 'https' && process.env.NODE_ENV === 'production')
res.redirect('https://'+req.hostname+req.url)
else
next() /* Continue to other routes if we're not redirecting */
});
server.get('/', (req, res) => ssrCache({ req, res, pagePath: '/' }))
server.get('*', (req, res) => handle(req, res))
server.listen(port, err => {
if (err) throw err
console.log(`> Ready on http://localhost:${port}`)
})
})

Answer 1

You should be able to just take what you need from req rather than taking the whole object, which as you know, gives you an error.
For example, if you are trying to get the user's IP address from a custom header then something like this should work:
pageProps.userip = ctx.req.headers['x-userip']
...and then:
<UserContext.Provider value={{ userip: pageProps.userip }}>
I hope this helps.

Answer 2

MyApp.getInitialProps = async (appContext) => {
const ip = appContext.ctx.req.connection.remoteAddress;
...
return {
props: {}
}
};

Answer 3

export async function getServerSideProps(context) {
const ip = context.req.headers['x-forwarded-for']
return {
props: {
ip
}
}
}