gatsby-plugin-netlify-admin

Gatsby + Netlify Identity = Static Site with Identification

Why?

You love Gatsby. You love Netlify. So you host your Gatsby site on Netlify.
You love static site. You also want your static site has identity feature.

Here is it. Powered your Gatsby site with Netlify Identity without pain.

Features

• Minimal configuration to set up Netlify Identity
• Protected pages with client side identity validation
• Support client side routing

Demo

Go to https://gatsby-plugin-netlify-admin.netlify.app/

Login as:

• Email: [e-mail]
• Password: guest

How to use

0. Enable the Netlify identity feature

Please follow the Authenticate users with Netlify Identity runbook to enable the Netlify identity in your dev site.

Since the plugin is using netlify-identity-widget under the hood, in dev environment, please follow

1. Install the package

yarn add gatsby-plugin-netlify-admin

2. Create the admin folder under /src

3. Add the plugin to gatsby-config.js

Minimal set up

{
    resolve: 'gatsby-plugin-netlify-admin',
    options: {
        adminPath: `${__dirname}/src/admin`
    }
}

4. Add some pages under /admin folder

Let's say you'd like to have an index admin page and another login page.

.
├── admin
    ├── index.js
    └── login.js

admin/index.js

import React from 'react';
 
const Admin = (props) => {
    return <div>Admin</div>
}
 
export default Admin;

admin/login.js

import React from "react"
 
const Login = props => {
  return <button onClick={props.showNetlifyLoginModal}>Login</button>
}
 
export default Login

5. Spin up gatsby

gatsby develop

Assume your page is host under http://localhost:8000.

Follow this flow:

> Navigate to http://localhost:8000/admin.
> Will be reidrected to http://localhost:8000/login since you've not logged in
> Click `Login` and the Netlify login modal appears. Log in with correct identity
> Navigate to http://localhost:8000/admin
> You can see the admin page

6. That's it

The setup is simple. The only thing you need to do is creating a folder to host the admin pages and you can reuse the original gatsby usage.

Usage

gatsby-config

All options

{
    resolve: 'gatsby-plugin-netlify-admin',
    options: {
        adminPath: `${__dirname}/src/admin`,
        adminUri: 'admin',
        loginUri: '/admin/login/',
        excludeUri: ['/admin/signup'],
    }
}

option	type	default	details
adminPath*	string		The field is required. The folder hosts the admin pages
adminUri	string	admin	the root admin URI. It means pages will be host under /<admin>/...
loginUri	string	/admin/login	This is the default redirection page if users are trying to access the auth first pages
excludeUri	Array	["/admin/login"]	Pages are eligble to all users

pages

All pages under the adminPath folder will be injected with Netlify login info.

You can directly access and use these props in your component:

props name	type	details
netlifyLogin	Function	The function triggers Netlify login popup
netlifyLogout	Function	The function signs out current user
netlifyAdminStatus	Object	The status of current user. values are: {user: Object, isLoggedIn: boolean, isModalOpen: boolean, error: string}

For example, you can take these props by:

admin/login.js

import React from "react"
import {navigate} from 'gatsby';
 
const Login = props => {
  if (props.netlifyAdminStatus && props.netlifyAdminStatus.isLoggedIn) {
        navigate('/admin');
    return null;
  }
  return (
      <button onClick={props.netlifyLogin}>Login</button>
  )
}
 
export default Login

More features

Client side routing

Admin pages usually happen to have client side generated pages. This plugin also makes it easy to configure.

We will utilize the Gatsby client routing to do the trick.

Update your admin/index.js file:

import React from "react"
import { Router } from "@reach/router"
import UserPage from "../components/UserPage"
const App = () => {
  return (
      <Router>
        <UserPage path="/admin/user/:id" component={UserPage} />
      </Router>
  )
}

Then /admin/user/:id will be generated by client side routing. Plus, this route will also be protected by identification since /admin/user/* is not in excludeUri.

---

Example: https://github.com/ctxhou/gatsby-plugin-netlify-admin/blob/master/example

Reference

• netlify-identity-widget: This plugin uses netlify-identity-widget under the hood