{"id":29822886,"url":"https://github.com/ctxhou/gatsby-plugin-netlify-admin","last_synced_at":"2025-07-29T01:12:08.464Z","repository":{"id":42861517,"uuid":"259013446","full_name":"ctxhou/gatsby-plugin-netlify-admin","owner":"ctxhou","description":"Gatsby + Netlify Identity = Static Site with Identification","archived":false,"fork":false,"pushed_at":"2023-01-06T04:32:50.000Z","size":2428,"stargazers_count":3,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-02T04:18:47.530Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://gatsby-plugin-netlify-admin.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ctxhou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-26T11:29:10.000Z","updated_at":"2023-03-04T05:13:12.000Z","dependencies_parsed_at":"2023-02-05T08:01:47.393Z","dependency_job_id":null,"html_url":"https://github.com/ctxhou/gatsby-plugin-netlify-admin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ctxhou/gatsby-plugin-netlify-admin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fgatsby-plugin-netlify-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fgatsby-plugin-netlify-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fgatsby-plugin-netlify-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fgatsby-plugin-netlify-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctxhou","download_url":"https://codeload.github.com/ctxhou/gatsby-plugin-netlify-admin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctxhou%2Fgatsby-plugin-netlify-admin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267613860,"owners_count":24115702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-29T01:12:05.346Z","updated_at":"2025-07-29T01:12:08.456Z","avatar_url":"https://github.com/ctxhou.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-netlify-admin\n\nGatsby + [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) = Static Site with Identification\n\n\n## Why?\n\nYou love Gatsby. You love Netlify. So you host your Gatsby site on Netlify.\u003cbr/\u003e\nYou love static site. You also want your static site has identity feature.\n\nHere is it. Powered your Gatsby site with [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) without pain.\n\n\n## Features\n\n* Minimal configuration to set up Netlify Identity\n* Protected pages with client side identity validation\n* Support client side routing\n\n## Demo\n\nGo to [https://gatsby-plugin-netlify-admin.netlify.app/](https://gatsby-plugin-netlify-admin.netlify.app/)\n\nLogin as:\n* Email: jpw41904@bcaoo.com\n* Password: guest\n\n## How to use\n\n### 0. Enable the Netlify identity feature\n\nPlease follow the [Authenticate users with Netlify Identity](https://docs.netlify.com/visitor-access/identity/#enable-identity-in-the-ui) runbook to enable the Netlify identity in your dev site.\n\nSince the plugin is using `netlify-identity-widget` under the hood, in dev environment, please follow\n\n### 1. Install the package\n\n```\nyarn add gatsby-plugin-netlify-admin\n```\n\n### 2. Create the `admin` folder under `/src`\n\n### 3. Add the plugin to `gatsby-config.js`\n\n**Minimal set up**\n\n```js\n{\n    resolve: 'gatsby-plugin-netlify-admin',\n    options: {\n        adminPath: `${__dirname}/src/admin`\n    }\n}\n```\n\n### 4. Add some pages under `/admin` folder\n\nLet's say you'd like to have an index admin page and another login page.\n\n```\n.\n├── admin\n    ├── index.js\n    └── login.js\n```\n\n**admin/index.js**\n\n```js\nimport React from 'react';\n\nconst Admin = (props) =\u003e {\n    return \u003cdiv\u003eAdmin\u003c/div\u003e\n}\n\nexport default Admin;\n```\n\n**admin/login.js**\n\n```js\nimport React from \"react\"\n\nconst Login = props =\u003e {\n  return \u003cbutton onClick={props.showNetlifyLoginModal}\u003eLogin\u003c/button\u003e\n}\n\nexport default Login\n```\n\n### 5. Spin up gatsby\n\n```\ngatsby develop\n```\n\nAssume your page is host under `http://localhost:8000`.\n\nFollow this flow:\n\n```\n\u003e Navigate to http://localhost:8000/admin.\n\u003e Will be reidrected to http://localhost:8000/login since you've not logged in\n\u003e Click `Login` and the Netlify login modal appears. Log in with correct identity\n\u003e Navigate to http://localhost:8000/admin\n\u003e You can see the admin page\n```\n\n### 6. That's it\n\nThe 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.\n\n## Usage\n\n### gatsby-config\n\n#### All options\n\n```js\n{\n    resolve: 'gatsby-plugin-netlify-admin',\n    options: {\n        adminPath: `${__dirname}/src/admin`,\n        adminUri: 'admin',\n        loginUri: '/admin/login/',\n        excludeUri: ['/admin/signup'],\n    }\n}\n```\n\n| option      | type   | default        | details                                                                                 |\n|-------------|--------|----------------|-----------------------------------------------------------------------------------------|\n| adminPath*  | string |                | The field is `required`. The folder hosts the admin pages                               |\n| adminUri    | string | `admin`          | the root admin URI. It means pages will be host under `/\u003cadmin\u003e/...`                    |\n| loginUri    | string | `/admin/login`   | This is the default redirection page if users are trying to access the auth first pages |\n| excludeUri | Array  | `[\"/admin/login\"]` | Pages are eligble to all users                                                   |\n\n### pages\n\nAll pages under the `adminPath` folder will be injected with Netlify login info.\n\nYou can directly access and use these props in your component:\n\n\n| props name         | type     | details                                      |\n| ------------------ | -------- | -------------------------------------------- |\n| netlifyLogin       | Function | The function triggers Netlify login popup    |\n| netlifyLogout      | Function | The function signs out current user          |\n| netlifyAdminStatus | Object   | The status of current user. values are: `{user: Object, isLoggedIn: boolean, isModalOpen: boolean, error: string}` |\n\nFor example, you can take these props by:\n\n**[`admin/login.js`](https://github.com/ctxhou/gatsby-plugin-netlify-admin/blob/master/example/src/admin/login.js)**\n\n```js\nimport React from \"react\"\nimport {navigate} from 'gatsby';\n\nconst Login = props =\u003e {\n  if (props.netlifyAdminStatus \u0026\u0026 props.netlifyAdminStatus.isLoggedIn) {\n\t\tnavigate('/admin');\n    return null;\n  }\n  return (\n      \u003cbutton onClick={props.netlifyLogin}\u003eLogin\u003c/button\u003e\n  )\n}\n\nexport default Login\n```\n\n## More features\n\n### Client side routing\n\nAdmin pages usually happen to have client side generated pages. This plugin also makes it easy to configure.\n\nWe will utilize the [Gatsby client routing](https://www.gatsbyjs.org/docs/client-only-routes-and-user-authentication/) to do the trick.\n\nUpdate your `admin/index.js` file:\n\n```js\nimport React from \"react\"\nimport { Router } from \"@reach/router\"\nimport UserPage from \"../components/UserPage\"\nconst App = () =\u003e {\n  return (\n      \u003cRouter\u003e\n        \u003cUserPage path=\"/admin/user/:id\" component={UserPage} /\u003e\n      \u003c/Router\u003e\n  )\n}\n```\n\nThen `/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`.\n\n---\n\nExample: https://github.com/ctxhou/gatsby-plugin-netlify-admin/blob/master/example\n\n## Reference\n\n* [netlify-identity-widget](https://github.com/netlify/netlify-identity-widget): This plugin uses netlify-identity-widget under the hood","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctxhou%2Fgatsby-plugin-netlify-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctxhou%2Fgatsby-plugin-netlify-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctxhou%2Fgatsby-plugin-netlify-admin/lists"}