nac

next-auth0-components

Components for adding Auth0 to a Next.js app.

Showing:

Popularity

Downloads/wk

0

GitHub Stars

4

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial