Authentication
One of the most frequently asked question is about authentication, so NextWeb.js provides it out of the box.
How It Works
Authentication in NextWeb.js is consisted of 3 parts:
1. userContext
NextWeb.js stores authentication data in userContext
and to make it accessible by every components, NextWeb.js wraps the app component with a higher-order component called withAuth()
.
// src/lib/auth/index.js
export function withAuth(PageComponent) {
function EnhancedPageComponent(props) {
const userData = useAuth()
return (
<userContext.Provider value={userData}>
<PageComponent {...props} />
</userContext.Provider>
)
}
...
return EnhancedPageComponent
}
Please note that authentication data comes from a custom hook called useAuth()
.
2. useAuth()
A custom hook used to provide data for userContext
.
// src/lib/auth/useAuth.js
export default function useAuth() {
const [userData, setUserData] = useState(undefined)
useEffect(() => {
// Wait for an authentication event to update userData
}, [])
return userData
}
Fortunately, NextWeb.js comes with buit-in useAuth()
for 2 popular types of authentication service.
Type | Example |
---|---|
Token-based | src/lib/auth/useAuth.js |
Firebase | src/lib/firebase/useAuth.js |
So you do not have to write any lines of code, just import the right one.
3. signIn()
A function that used to call authentication API and triggers useEffects()
in useAuth()
. Here are some examples.
Token-based Authentication
function signIn(email, password) {
return postAPI({
apiUrl: process.env.HOST,
path: '/api/signIn',
data: {
email,
password,
},
}).then(token => {
location.href = `/?token=${token}`
})
}
Firebase Authentication
function signIn(email, password) {
firebase.auth().signInWithEmailAndPassword(email, password)
}