Skip to content

possibilities/next-github-auth

Repository files navigation

Next.js auth with Github CircleCI

Components and decorators for using Github authentication with Next.js

screen

Usage

  1. Install into your Next.js app

    yarn add next-github-auth
    
  2. Create sign-in and sign-out pages

    At pages/sign-in.js

    import { SignIn } from 'next-github-auth'
    export default SignIn
    

    At pages/sign-out.js

    import { SignOut } from 'next-github-auth'
    export default SignOut
    

    If you need to customize the scope you can configure the SignIn page

    import { configureSignIn } from 'next-github-auth'
    const SignIn = configureSignIn({ scope: 'repo gist' })
    export default SignIn
    
  3. Wrap private pages with PrivatePage decorator

    Any Next.js page that should only be accessible to authenticated users should be wrapped with the PrivatePage decorator, e.g.:

    import { PrivatePage } from 'next-github-auth'
    
    const Private = props => <div>private page!</div>
    export default PrivatePage(Private)
    
  4. Wrap public pages with PublicPage decorator

    All other Next.js pages should be wrapped with the PublicPage decorator, e.g.:

    import { PublicPage } from 'next-github-auth'
    
    const Public = props => <div>public page!</div>
    export default PublicPage(Public)
    
  5. Optionally access the currently signed in github user and access tokens in a Next page component's getInitialProps, e.g:

    import React from 'react'
    import PropTypes from 'prop-types'
    import { PrivatePage } from 'next-github-auth'
    
    const UserRepos = ({
      github: {
        accessToken,
        user: { login }
      }
    }) => (
      <div>
        {!repos.length && (
          <div>cool, you have 0 repos!</div>
        )}
    
        {!!repos.length && (
          <ul style={{ margin: 0 }}>
            {repos.map(({ fullName }) => (
              <li key={fullName}>{fullName}</li>
            ))}
          </ul>
        )}
      </div>
    )
    
    UserRepos.getInitialProps ({ github: { accessToken } }) {
      const githubRepos = await getGithubRepos(accessToken)
      const repos = githubRepos.map(repoView)
      return { repos }
    }
    
    export default PrivatePage(UserProfile)
    
  6. Optionally access the currently signed in github user and access tokens via React's context, e.g:

    import React from 'react'
    import PropTypes from 'prop-types'
    import { PrivatePage } from 'next-github-auth'
    
    const UserProfile = (props, {
      github: {
        accessToken,
        user: { login }
      }
    }) => (
      <div>
        <div>{login}'s profile</div>
        <div>token: {accessToken ? 'hidden' : 'not available'}</div>
      </div>
    )
    
    UserProfile.contextTypes = {
      github: PropTypes.shape({
        accessToken: PropTypes.string,
        user: PropTypes.shape({
          login: PropTypes.string
        })
      })
    }
    
    export default PrivatePage(UserProfile)
    

Setup app environment

  1. Add an OAuth application to your Github account to generate a client id and secret

    Set the callback URL to the public URL of the deployed app

  2. Setup environment

    Export your GitHub app's client id and secret as environment variables

    export GITHUB_CLIENT_ID=YOUR_APP_ID
    export GITHUB_CLIENT_SECRET=YOUR_APP_SECRET
    

Run app

  1. Start the app

    yarn dev
    

About

Components and decorators for using Github authentication with Next.js

Resources

Stars

Watchers

Forks

Packages

No packages published