0

I'm building an app where I need to authorize the users based on 'mode' queryParameter & apikey that comes from the consuming applications.

It will then send an api request to backend and confirm if the user has the authorization. Also want to ensure that apikey is not exposed to outside.

Just wondering how am I going to approach this in Next.js?

I was thinking to build a local api and fetch the backend response and then call the local api from the pages. Because this has to happen in the _app.js (centralized), where getServerSideProps is not permitted, I'm bit confused on my approch.

Really appreciate your feedback

Explorer
  • 155
  • 14
  • How I solved this problem was calling the backend express app that has application which has whitelisting and other configs already set-up, via getServerSideProps. As getServerSideProps obviously occur in server-side, APIKEY or the request doesn't get registered in the browser. I wanted this to happen in _app but couldn't work that out as getServerSideProps is not allowed in _app – Explorer Jun 29 '21 at 23:30

1 Answers1

0

Next.js is used to build client-side app. General rule of thumb for client-side authentication is "don't authenticate / authorize on client-side".

Applications must place authorization outside client-side code, since it could be arbitrarily modified by any party

source : https://www.staticapps.org/articles/authentication-and-authorization/

So, centralized authentication is out of Next.js scope. It's in the scope of microservices (following Jamstack architecture https://jamstack.org/).

yogski
  • 181
  • 1
  • 10
  • Thanks for your answer :) What if the app is freely available via internet and no login is needed to access? Then how could I secure the apikey and rest calls? – Explorer Jun 27 '21 at 22:33
  • A common approach is having backend to handle it. Express.js can be good start .Users will access next.js app, which then will pass the request to the backend. Another method could be custom server (https://nextjs.org/docs/advanced-features/custom-server) – yogski Jun 28 '21 at 11:44