Next Auth0 Components
Components for quickly adding Auth0 support to a Next.js app.
TODO
- Logout page
- Authentication helpers
- Multiple account connecting
- Custom profile form
Usage
Setup a client in Auth0 and allow the https://yourdomain.com/login and https://yourdomain.com/logout callback Urls.
Set process.env.AUTH0_ID and process.env.AUTH0_DOMAIN to your client
Minimal Setup
Create a pages/login.js page and render the <Login auth0Id={process.env.AUTH0_ID} auth0Domain={process.env.AUTH0_DOMAIN} /> component.
Intercept authentication to verify or create a user in your database.
Provide an onAuthenticated( authResult, profile, callback ) function to intercept the authentication response and verify email, create a user in your database etc.
onAuthenticated = ( authResult, profile, callback ) => {
if(ok){
// set local storage etc and redirect...
Router.push('/');
} else {
//
if(error){
callback(null, error);
} else {
// initalize create step with a user
callback({name: profile.name});
}
}
}
Add onCreate to create a user
onCreate = ( user, authResult, callback ){
// create in db or error from profile info
createUserMutation(user).then(()=>{
Router.push('/');
}).catch(error => callback( error );)
}
Using Lock Overlay
Use the <Lock /> component on a page to generate an overlay login form...
import Lock from 'next-auth0-components';
<Lock layout={({lock})=>(<button onClick={()=>{lock.show()}}>Overlay Login</button>)} auth0Id={process.env.AUTH0_ID} auth0Domain={process.env.AUTH0_DOMAIN}><a href="/login">Static Login Link</a></Lock>
App Boilerplate & Example
Custom next.js server routing in app.js pm2 cluster setup in server.js module export in index.js.
Run app as single instance
node app.js
Run in a PM2 cluster
node server.js
Build
next build