How to access window.location in client when using next.js? #3322

villesau · 2023-07-21T11:15:20Z

villesau
Jul 21, 2023

Hi, I need to access window.location properties in urql client. However, since Next.js renders stuff on server side, some of these might not be defined always. How do I access these or similar properties on server side via Next.js? Such as window.location.search and window.location.pathname, window.origin etc. I have for example an error handler that redirects if the user is not logged in and need to access token from the url and attach it as a bearer header etc.

kitten · 2023-07-21T12:44:45Z

kitten
Jul 21, 2023
Maintainer

I don't think this is related to urql at all fwiw

But, you should be able to read the Next route location universally. That depends though on how you initialise your urql Client. Either you'll have access to the "page context" object, or you'll be able to use the useRouter hook. Again, depends on how you initialise the client.

Also, just to point this out, I'm not sure how you add the bearer token to the URL, but it's probably worth mentioning that I wouldn't just put it in the URL. Rather, I'd make sure that it's never sent back to the server, e.g. either by adding a token exchange process on the client-side, or by adding it only to the hash part of the URL, so it's client-side-only.

Otherwise you'd lose a lot of the benefits over cookies and keeping that token in a non-JS/secure space. Anyway, I'm just assuming you're trying to make an OpenID-like PKCE redirect signin flow.

Also, I'm not sure what the actual error handler is for and why it'd concern auth + logging in. Presumably, your auth flow, if the user is not logged in has the ability to log the user back in via a cookie refresh mechanism? Why, if the cookie is sent, would the access token not be a cookie? Or alternatively, if cookies are explicitly not desired, why wouldn't this be an API-only refresh mechanism?

Anyway, just pointing out there's a lot of questions here for which only you can determine the answer to, but I don't think any of this really can be answered "by urql", so to speak 😅 ❤️

2 replies

villesau Jul 22, 2023
Author

Thanks for the answers! I think my question was pretty poorly framed.

I don't think this is related to urql at all fwiw

I could probably have framed this in more urql specific manner, sorry about that :) The question would have been then framed more like: How to pass data (e.g next.js router specific stuff) from react side to urql client exchanges (such as error exchange or auth exchange). Right now it's mostly stuff from the url, but theoretically could be anything - however, it was a good point that react router apparently works universally so this could actually work: vercel/next.js#17046 (assuming it also works on server side)

The current code looks roughly like this:

"use client";
import { authExchange } from "@urql/exchange-auth";
import { errorExchange, Provider, createClient } from "urql";

const client = createClient({
  exchanges: [
    errorExchange({
      onError: (error) => {
        if (error.message.includes("Not logged in")) {
          if (window.location.pathname !== "/login") {
            window.location.href = "/login";
          }
        } else {
          // do something else
        }
      },
    }),
    authExchange(async (utils) => {
      const urlParams = new URLSearchParams(window.location.search);
      const token = urlParams.get("token");
      return {
        addAuthToOperation(operation) {
          if (!token) return operation;
          return utils.appendHeaders(operation, {
            Authorization: `Bearer ${token}`,
          });
        },
        didAuthError: () => false,
        async refreshAuth() {
          // needs to be here but we don't use it
        },
      };
    }),
  ],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head />
      <body>
        <Provider value={client}>{children}</Provider>
      </body>
    </html>
  );
}

assuming that importing the router instance would not be possible, I think the window.location could be considered as any data that should be passed from the react side hooks to the exchanges.

Also, just to point this out, I'm not sure how you add the bearer token to the URL, but it's probably worth mentioning that I wouldn't just put it in the URL. Rather, I'd make sure that it's never sent back to the server, e.g. either by adding a token exchange process on the client-side, or by adding it only to the hash part of the URL, so it's client-side-only.

Token handling and managing non-logged in users were not related to each others, but independent pieces of logic that we deal with in exchanges.

About the tokens: We have a case where we need to generate preview links for our clients and they need to be able to access them without authentication. Thus the only place to carry the token for viewing is in the url. However, in the API I would not want to carry it in the url anymore, that's why I want to mangle it to the bearer token instead. I don't exactly like that workflow either, but it's the only method I came up with :) We want the tokens to expire after some time to minimize risk of leaking. Our normal auth workflow works via cookies and the token based auth is totally separate from that. What makes it a bit more annoying is that also logged in users might receive preview links so we need to be able to handle cases where they are using both auth methods (and we should prefer cookie auth over preview link). Maybe an alternative way could be to have a specific url for granting a session cookie using the token and do a redirect, but handling more than one session cookies felt also pretty cumbersome with iron-session and with the initial experiments I always lost the other session when creating the other.

I hope this clarified things a bit! :)

JoviDeCroock Jul 22, 2023
Maintainer

You can create the urql-client in a useMemo and pipe in data from useRouter

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to access window.location in client when using next.js? #3322

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to access window.location in client when using next.js? #3322

villesau Jul 21, 2023

Replies: 1 comment · 2 replies

kitten Jul 21, 2023 Maintainer

villesau Jul 22, 2023 Author

JoviDeCroock Jul 22, 2023 Maintainer

villesau
Jul 21, 2023

Replies: 1 comment 2 replies

kitten
Jul 21, 2023
Maintainer

villesau Jul 22, 2023
Author

JoviDeCroock Jul 22, 2023
Maintainer