[bugs]:Header cookies will lost if do not defined getServerSideProps function in #17134

thinksource · 2020-09-16T08:30:44Z

thinksource
Sep 16, 2020

Bug report

Describe the bug

The page without defined getServerSideProps function will lost the header props of request. espically, for my case, I lost the cookies

The getInitialProps do not keep headers, only getServerSideProps defined can keep headers.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Defined some cookies in you headers during the response.

     res.setHeader('Set-Cookie', cookie_str)

2, Define cookies provider in _app.tsx

export default function MyApp(props: AppProps) {
  const { Component, pageProps } = props;
  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    
    if (jssStyles) {
      jssStyles.parentElement!.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <UserProvider cookie={pageProps.cookie}>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Nav />
        <Component {...pageProps} />
      </ThemeProvider>
      </UserProvider>
    </React.Fragment>
  );
}

MyApp.getInitialProps = async (appContext: AppContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);
  const cookie = appContext.ctx.req?.headers.cookie

  // console.log(cookies(appContext.ctx))
  appProps.pageProps = Object.assign(appProps.pageProps, {cookie})

  return {  ...appProps }
}

inside the MyApp.getInitialProps function I just inject cookie into pageProps, and in UserProvider, I use this cookie

Define the UserProvider explain user from cookie_str:

export const UserProvider = ({cookie, children }: Props)=>{
    console.log(cookie)
    let defaultUser = decodeAuthCookie(cookie?cookie:'')
    UserStateContext= createContext<User>(defaultUser)
    // console.log(defaultUser)

    return (
        <UserStateContext.Provider value={defaultUser}>
            {children}
        </UserStateContext.Provider>
    )

}

The page with function

export const getServerSideProps = async (ctx: NextPageContext) => {
   ....
}

no mater what you write inside, but if you component do not have getServersideProps function defined. it will lost the cookie.
I mean inside the request there still have cookie but my UserProvider get empty cookie.

Expected behavior

Not lose any cookies, even not function defined.

Screenshots

You can find my fixed:

https://github.com/thinksource/nwt/releases/tag/v0.2

the previous page /organization and /organization/add will not continue using cookies

System information

OS: windows & linux (online test on aws)
Browser : chrome
Version of Next.js: 9.5.3
Version of Node.js: 14.10.1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[bugs]:Header cookies will lost if do not defined getServerSideProps function in #17134

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

[bugs]:Header cookies will lost if do not defined getServerSideProps function in #17134

Uh oh!

thinksource Sep 16, 2020

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Replies: 0 comments

thinksource
Sep 16, 2020