从 getInitialProps 使用 localstorage 或 cookie 和 Apollo 验证 Nextjs 网站

Question

I have some problems with the auth process on Nextjs project. From the example , it stores the token in cookies, but in checkLoggedIn.js it queries DB instead of get the token from cookie.

I would like to get the token from cookie or localstorage in getInitialProps , but in getInitialProps , it can NOT see localstorage because it's still in server side. Is there any better way that I could auth user before component render?

Not sure is it possible to get the token from getToken in apollo client.

My current code is

class DashBoard extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount () {
    const decodeToken = verifyToken(localStorage.getItem('KEY'));

    if (!decodeToken.mail) {
        Router.push('/login');
    } else {
        this.props.loginSuccess(decodeToken.name, decodeToken.mail);
    }
  }
  render () {
      return (<div></div>)
  }
}

Thank you

Answer 1

I solved this by using nookies . It works both server side (for getInitialProps) and client side in Next.js

Answer 2

Here is what I did to solve it after few days of research (honestly, not the best documentation around)

In the getInitialProps , I took the headers from the requests and copied them over in my fetch request.

Profile.getInitialProps = async ({ req }) => {

  const headers = { ...req.headers }
  const url = `http://localhost:3000/api/profile`

  const data = await fetch(url, { headers }).then(res => res.json())

  return { data }
}

Keep in mind that this only works on the server. For the client, you can just pass {credentials: 'include'} to fetch