nghiepdev/next-universal-cookie

🍪 Provides a way to read, set and delete a cookie for Next.js

next-universal-cookie's Issues

v3 removed `useCookie` breaking all client-side parsing

After updating to v3:

Module '"next-universal-cookie"' has no exported member 'useCookie'.ts(2305)

Thus making the following client-side code no longer possible:

const [cookies, setCookie, removeCookie] = useCookie([TOKEN_STORAGE_KEY])

use in `getInitialProps` or alternative to Auth HOC?

So, following a tutorial I got as far as creating a High Order Component for SSR/SSG before I was told (rather aggressively) that I can't use Hooks here -- and only see examples for getServerSideProps (which won't be available in my deployment, I'm doing export and serving static.)

import { Component } from 'react'
import { AuthToken } from './AuthToken'
import { useLogin, useLoginProps } from './useLogin'

export type AuthProps = useLoginProps

export function PrivateRoute(WrappedComponent: any) {
  return class PrivateRoute extends Component<AuthProps> {
    state = {
      auth: new AuthToken(this.props.accessToken)
    };

    static async getInitialProps() {
      // create AuthToken
      const { accessToken, loginWith, logout } = useLogin()
      const auth = new AuthToken(accessToken)
      const initialProps = { auth, loginWith, logout }

      // if the token is expired, that means the user is no longer (or never was) authenticated
      // and if we allow the request to continue, they will reach a page they should not be at.
      if (auth.isExpired) console.log('hey! server says you shouldnt be here! you are not logged in!')

      if (WrappedComponent.getInitialProps) {
        const wrappedProps = await WrappedComponent.getInitialProps(initialProps)
        // make sure our `auth: AuthToken` is always returned
        return { ...wrappedProps, auth, loginWith, logout }
      }

      return initialProps
    }

    componentDidMount(): void {
      // since getInitialProps returns our props after they've JSON.stringify
      // we need to reinitialize it as an AuthToken to have the full class
      // with all instance methods available
      this.setState({ auth: new AuthToken(this.props.accessToken) })
    }

    render() {
      // we want to hydrate the WrappedComponent with a full instance method of
      // AuthToken, the existing props.auth is a flattened auth, we want to use
      // the state instance of auth that has been rehydrated in browser after mount
      const { ...propsWithoutAuth } = this.props
      return <WrappedComponent auth={this.state.auth} {...propsWithoutAuth} />
    }
  }
}

The issue stems from my useLogin which uses this plugin:

import { useCookie } from 'next-universal-cookie'
import { useEffect, useState } from 'react'
import { TOKEN_STORAGE_KEY } from '../services/AuthToken'

// eslint-disable-next-line no-unused-vars
type loginFunc = (provider: string) => void
 
export type useLoginProps = {
  accessToken: any
  loginWith: loginFunc
  logout: () => void
}

export const useLogin = (): useLoginProps => {
  // v    React vomits because I tried to use a Hook outside of a client context
  const [cookies, setCookie, removeCookie] = useCookie([TOKEN_STORAGE_KEY])
  // ...
}

So... How do I access the equiv. of useCookie outside of a client context?