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: jpw41904@bcaoo.com
- 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
admin
folder under /src
2. Create the gatsby-config.js
3. Add the plugin to Minimal set up
resolve: 'gatsby-plugin-netlify-admin' options: adminPath: `/src/admin`
/admin
folder
4. Add some pages under Let's say you'd like to have an index admin page and another login page.
.
├── admin
├── index.js
└── login.js
admin/index.js
; const Admin = { return <div>Admin</div>} ;
admin/login.js
const Login = { return <button onClick=propsshowNetlifyLoginModal>Login</button>}
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: `/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:
; const Login = { if propsnetlifyAdminStatus && propsnetlifyAdminStatusisLoggedIn ; return null; return <button onClick=propsnetlifyLogin>Login</button> }
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:
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