Use external API with PassportJS

[theprobugmaker]

I have an external API with PassportJS authentication configured in it using the local strategy and everything is working perfectly. The question I have is related to with-passport example as it's confusing me in a few things.
I noticed that both the client and the actual server is in the same example, even the strategy itself so I was wondering, which portion of the code I can remove and use an external instead? Specially the cookie portion cause everything that the external api returns is a cookie with the session in it and I need to use it to every request made by the application.

[j0lvera]

The with-passport example is to explain how to use Passport with API routes. I think all examples aim to show how to use different tech in Next.js.

So, I think the example won't be of much help when you use an external API with Passport.

There are different ways to approach your setup, you can make calls from the client to your external API and share a token between the Next.js app and your API. You can also create API routes in your Next.js app that will call your external API.

If you need to use an external API and want to keep the session management in Next.js you could handle your sessions with API routes and query your external API from there too.

[j0lvera]

@j0lv3r4 I just noticed something, isn't it insecure to use getServerSideProps for this? For example, in the docs it says that when the user clicks a link and the client-side does a page transition it will call the getServerSideProps internally as an API request, what if the user intercepts and modifies authorized to true and user with some information? thinking

@tim-phillips @Timer

You can verify every request by validating the cookies. If authorized is changed to true you still have to validate the cookies and that's where you redirect the user when the cookies are invalid. The authorized is a convenience for your client's logic, it shouldn't be what defines if the user is really authorized or not.

[theprobugmaker]

@rafaelalmeidatk @j0lv3r4 You guys are right, it doesn't make much sense but for some reason I thought it would work manipulate the json sent by the server with the user's info and an authorized flag.

@j0lv3r4 How would you validate a cookie? I mean in my case I just have the cookie with the user's session in it, I would need to be calling the server to check if the user is still logged in there like calling a me endpoint for example? Or there's another way?

[hanselabreu]

If you need to use an external API and want to keep the session management in Next.js you could handle your sessions with API routes and query your external API from there too.

Let's say I keep the session management within Next.js and store the http cookies. How can I forward that cookie to an external API on every request on the Next.js server side?

[j0lvera]

@hanselabreu You add the cookie to the request headers, e.g.,

const result = await fetch("api/", {
  headers: {
    cookie: 'cookieKey=cookieValue"
  }
});

[hanselabreu]

@j0lv3r4 well in my case I am using apollo. Not sure if you're familiar with it, but my problem is that I can't access the context to get the req.headers to pass along the cookies within the ApolloClient. Take a look below:

const httpLink = createUploadLink({
  uri: "http://localhost:4000",
  credentials: "same-origin",
})

const authLink = setContext((_, ctx) => {
  const { headers } = ctx // this is wrong, it just returns `undefined`
  const cookies = typeof window === "undefined" ? nextCookie(ctx) : cookie.get()
  return {
    headers: {
      ...headers,
      authorization: concat("Bearer ", cookies?.token || ""),
    },
  }
})

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  })
}

So what I was wondering, is if there's a way to explicitly include all the headers to external API's