Skip to content
Authentication & Authorization library for the Next.js framework
JavaScript
Branch: master
Clone or download
j0lv3r4 Merge pull request #10 from j0lv3r4/dependabot/npm_and_yarn/lodash-4.…
…17.15

Bump lodash from 4.17.11 to 4.17.15
Latest commit 6f5b933 Aug 7, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/simple add example and fix dependencies Aug 6, 2019
src add example and fix dependencies Aug 6, 2019
.gitignore add example and fix dependencies Aug 6, 2019
.npmignore add example and fix dependencies Aug 6, 2019
.prettierrc first commit Jan 4, 2019
LICENSE
README.md Add license scan report and status Jun 14, 2019
package-lock.json add example and fix dependencies Aug 6, 2019
package.json bump version Aug 6, 2019
rollup.config.js fix #2 #3 Jan 6, 2019
yarn.lock Bump lodash from 4.17.11 to 4.17.15 Aug 6, 2019

README.md

Next Authentication

FOSSA Status

next-authorization is an authentication & authorization library for the Next framework. It provides user session management and handles logging in, logging out.

Features:

  • Backend agnostic. You are in charge of implementing the login and registration in the backend with the language you prefer.
  • You can optionally use the login and logout helper functions or implement your own.
  • Restricts pages to logged-in users using the withAuth HOC or the auth helper function.

Installation

next-authentication is published to npm:

$ npm i next-authentication --save

Usage

Login a user

import { Component } from 'react'
import Router from 'next/router'
import { login } from 'next-authentication'

class Login extends Component {
  constructor(props) {
    super(props)

    this.state = {
      username: '',
      password: ''
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    const { name, value } = event.target
    this.setState({
      [name]: value
    })
  }

  async handleSubmit(event) {
    event.preventDefault()
    const { username, password } = this.state

    try {
      const response = await fetch('https://apiurl.io', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      })

      if (response.ok) {
        const { token } = await response.json()
        const loginOptions = {
          token,
          cookieOptions: { expires: 1 },
          callback: () => Router.push('/profile')
        }
        login(loginOptions)
      } else {
        console.log('Login failed.')
      }
    } catch (error) {
      console.log('Implementation or Network error.')
    }
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Username</label>
        <input
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.handleChange}
        />

        <label htmlFor="password">Password</label>
        <input
          type="password"
          name="password"
          value={this.state.password}
          onChange={this.handleChange}
        />
      </form>
    )
  }
}

export default Login

Logout

import Link from 'next/link'
import Router from 'next/router'
import { logout } from 'next-authorization'

const Header = props => {
  const redirect = () => Router.push('/login')
  const userLogout = () => logout(redirect)
  return (
    <header>
      <nav>
        <Link href="/">
          <a>Home</a>
        </Link>
        <Link href="/login">
          <a>Login</a>
        </Link>
        <button onClick={userLogout}>Logout</button>
      </nav>
    </header>
  )
}

export default Header

Restrict pages to logged-in users

import Router from 'next/router'
import withAuth from 'next-authentication'

const Profile = props => <div>User is logged in</div>

const authOptions = {
  // client callback for invalid sessions
  callback: () => Router.push('/login'),
  // the server takes care of the redirect, only pass a string
  // with the route
  serverRedirect: '/login'
}
export default withAuth(authOptions)(Profile)

next-authorization API

login(config)

next-authentication uses js-cookie for cookie handling so you can pass the same configuration object to the cookieOptions option.

// Login a user
login({
  token: '',
  cookieOptions: { expires: 7, path: '' },
  callback: () => {
    console.log('Do something after the user is logged in.')
  }
})

logout(callback)

logout(() => {
  console.log('Do something after the user is logged out.')
})

withAuth(config)

withAuth({
  serverRedirect: '/login'
  callback: () => {
    console.log('Do something if the session is invalid.')
  },
})(Component)

auth(config)

auth({
  serverRedirect: '/login'
  callback: () => {
    console.log('Do something if the session is invalid.'),
  },
  content: ctx // context instance from `getInitnialProps`,
})

License

FOSSA Status

You can’t perform that action at this time.