nghiepdev / next-universal-cookie Goto Github PK
View Code? Open in Web Editor NEW๐ช Provides a way to read, set and delete a cookie for Next.js
License: MIT License
๐ช Provides a way to read, set and delete a cookie for Next.js
License: MIT License
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])
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.