Handling redirects in NextJS, can it be done from _app.tsx? #12682

rockchalkwushock · 2020-05-10T15:27:52Z

rockchalkwushock
May 10, 2020

I'm trying to port over a Django GraphQL API from a CRA app to use NextJS. I've got @apollo/client working fine and am making use of it within _app.tsx because the whole app makes use of the GraphQL endpoint. The Django app handles all the authentication views and redirects the user to an auth.html in the current app that gets the access_token out of the URL and gives it to the ApolloClient to make sure the user is authenticated to access the CRA App. I've been able to get that far. The problem I'm running into is that with the CRA App we sent the user to / from auth.html, would run the viewer query, and if a user is found reach-router would then use the redirect feature to send the user to their dashboard at /profiles/[id]/meetings. I'm not really sure how to do this in NextJS.

An idea I have is to just create a /pages/index.tsx and if the UserContext is present then redirect to /profiles/[id]/meetings using the Router API and if not for the time being just render an error message. Is there perhaps a better way of handling this from _app.tsx?

`public/auth.html`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <title>Appointlet</title>
  </head>

  <body>
    <script>
      const ACCESS_TOKEN_KEY = 'access_token'
      const LAST_PAGE_URL_KEY = 'lastPage'

      // Helper to fetch the accessToken from the URL
      function getAccessToken() {
        return /access_token\=([^&]+)/.exec(location.hash)[1]
      }

      // Helper to get the lastPageURL from the session if it exists
      function popLastPageURL() {
        const lastPage = sessionStorage.getItem(LAST_PAGE_URL_KEY)

        // Remove it from the store so that it isn't accidently used again
        if (lastPage) {
          sessionStorage.removeItem(LAST_PAGE_URL_KEY)
        }

        return lastPage
      }

      // Set the access token in the local store
      localStorage.setItem(ACCESS_TOKEN_KEY, getAccessToken())

      // Redirect the user to the appropriate location
      window.location.assign(popLastPageURL() || '/')
    </script>
  </body>
</html>

`pages/_app.tsx`

import { AppProps } from 'next/app'
import { gql, ApolloProvider } from '@apollo/client'
import { WithApolloProps } from 'next-with-apollo'

import { ViewerComponent } from '../__generated__/graphql'
import { UserContext } from '../components'
import { withApollo } from '../lib'

const query = gql`
  query Viewer {
  ....
  }
`

const App: React.FC<AppProps & WithApolloProps<{}>> = ({
  apollo,
  Component,
  pageProps,
}) => {
  return (
    <ApolloProvider client={apollo}>
      <ViewerComponent>
        {({ data }) => (
          <UserContext.Provider value={data?.user}>
            <Component {...pageProps} />
          </UserContext.Provider>
        )}
      </ViewerComponent>
    </ApolloProvider>
  )
}

export default withApollo(App)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Handling redirects in NextJS, can it be done from _app.tsx? #12682

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Handling redirects in NextJS, can it be done from _app.tsx? #12682

Uh oh!

rockchalkwushock May 10, 2020

public/auth.html

pages/_app.tsx

Replies: 0 comments

rockchalkwushock
May 10, 2020

`public/auth.html`

`pages/_app.tsx`