{"id":18450000,"url":"https://github.com/solublestudio/gatsby-plugin-data-protect","last_synced_at":"2025-04-18T00:23:10.222Z","repository":{"id":35162645,"uuid":"213032946","full_name":"solublestudio/gatsby-plugin-data-protect","owner":"solublestudio","description":"Gatsby plugin to protect content by email","archived":false,"fork":false,"pushed_at":"2023-01-24T00:42:45.000Z","size":954,"stargazers_count":0,"open_issues_count":17,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T09:26:32.840Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solublestudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-05T16:29:51.000Z","updated_at":"2019-10-31T08:49:14.000Z","dependencies_parsed_at":"2023-02-13T05:55:18.639Z","dependency_job_id":null,"html_url":"https://github.com/solublestudio/gatsby-plugin-data-protect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solublestudio%2Fgatsby-plugin-data-protect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solublestudio%2Fgatsby-plugin-data-protect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solublestudio%2Fgatsby-plugin-data-protect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solublestudio%2Fgatsby-plugin-data-protect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solublestudio","download_url":"https://codeload.github.com/solublestudio/gatsby-plugin-data-protect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249167445,"owners_count":21223506,"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","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":"2024-11-06T07:22:58.062Z","updated_at":"2025-04-15T23:01:08.169Z","avatar_url":"https://github.com/solublestudio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-data-protect\n\nGatsby plugin to protect content by email.\n\nAt Gatsby, all graphQL query results are present in distribution JS files. By inspecting them, you can reach that information. What if you want to protect some data to specific users targeted by their company email?\nUsing [Airtable](https://airtable.com/) as database, [Sendgrid](https://sendgrid.com/) as tool for sending emails, [AWS](https://aws.amazon.com/) and the awesome [Serverless](https://serverless.com/), this plugin:\n\n* Persists the data you want to protect in an \"unknown\" local JSON file.\n* Creates a login endpoint using different services from AWS (mainly AWS Lambda, AWS API Gateway) that validates the company email and sends an email to user for login. Once logged in, that endpoint get the name of the local JSON file with the protected data.\n* It handles all \"auth\" flow: redirects to login page if there is protected data and user is not logged in. If user is logged in, it directly shows the data. It uses localStorage to store token and protected data, to avoid having to enter the email each time you enter the page.\n* Saves the emails in an Airtable table.\n\nWe develop that plugin to protect some content, available only for company employees. You can use it also for external users, in example collecting emails to allow downloading a file. Is easy to add different database or email (SMS?) connectors. \nFeel free to submit a pull request with your integration.\n\n\n## Install\n\n`yarn add gatsby-plugin-data-protect`\n\nor\n\n`npm install --save gatsby-plugin-data-protect`\n\n\n## How to use\n\n1. Create a login page with the contents you want and a form with `id=\"data-protect-form\"`. The plugin will automatically hook the form behaviour to handle login, and use that page and all subpages to handle auth.\n\n```javascript\nimport React, { useRef, useEffect } from \"react\";\n\nconst LoginPage = () =\u003e {\n  const form = useRef(null);\n\n  useEffect(() =\u003e {\n    form.current.addEventListener('loading', e =\u003e {\n        // Event that will be executed when sending the form request\n    });\n\n    form.current.addEventListener('success', e =\u003e {\n        // Event that will be executed on submit sucess\n    });\n\n    form.current.addEventListener('error', e =\u003e {\n        // Event that will be executed on submit error\n    });\n  }, []);\n\n  return (\n    \u003c\u003e\n      \u003ch1\u003eLogin\u003c/h1\u003e\n      \u003cform ref={form} id=\"data-protect-form\"\u003e\n          \u003cinput type=\"email\" name=\"email\" placeholder=\"Enter your email\" /\u003e\n      \u003c/form\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default LoginPage;\n```\n\n2. Include the plugin in your `gatsby-config.js` file with their mandatory options:\n\n```javascript\nplugins: [\n    ...,\n    {\n        resolve: 'gatsby-plugin-data-protect',\n        options: {\n            version: '1', // Name of a version for the data.\n            public_url: 'http://localhost:8000', // Public URL \n            login_path: 'login', // Path for the login page\n            loading_component: require.resolve(`./src/components/Loader`), // Component you want to use for the \"loading\" state (there is one by default)\n            data_protect_keys: [ 'privateData' ], // Keys of data from the pageContext you want to protect\n        }\n    },\n...\n]\n```\n\n3. Move the private data to `pageContext`: the only way we have to avoid adding graphQL query results into the client, is to remove them on build process. So you have to add all the private data in `createPage` function inside `gatsby-node.js`.\n\n```javascript\nexports.createPages = async ({ graphql, actions }) =\u003e {\n    const { createPage } = actions;\n    const component = path.resolve(`src/templates/index.js`);\n\n    createPage({\n        path: `/sensitive-page`,\n        component,\n        context: {\n            publicData: 'lorem', // This data will be stored and directly shown in the template.\n            privateData: 'ipsum', // This data will be replaced by a placeholder (as is a string, will be replaced by an empty string) if the user is not logged in, and hydrated by the local JSON file if the user is logged in\n        }\n    });\n};\n```\n\n4. Create a new view in Airtable with an `Email` field.\n\n5. Create a `.env` file in project root with all the keys we need to setup different services:\n\n```\nDATA_PROTECT_SERVER_NAME=project-name # This will be used to name all services in AWS.\nDATA_PROTECT_SERVER_PROVIDER=aws # Serverless accepts more provider, but for the moment we only use AWS.\nDATA_PROTECT_SERVER_REGION=eu-west-1 # AWS region\nDATA_PROTECT_SERVER_SECRET=xxxxx # AWS Secret api key for a user with AdministratorAccess (check Serverless documentation)\nDATA_PROTECT_SERVER_KEY=xxxxx # AWS Public api key\nDATA_PROTECT_DB_PROVIDER=airtable # For the moment we only support Airtable.\nDATA_PROTECT_DB_KEY=xxxx # Airtable private key\nDATA_PROTECT_DB_NAME=xxxx # Airtable database id\nDATA_PROTECT_DB_TABLE=Table 1 # Airtable database view for storing and getting users\nDATA_PROTECT_MAIL_PROVIDER=sendgrid # For the moment we only support Sendgrid\nDATA_PROTECT_MAIL_DOMAIN=solublestudio.com,soluble.studio # In case you want to restrict company emails\nDATA_PROTECT_MAIL_KEY=xxxxx # Sendgrid key\nDATA_PROTECT_MAIL_FROM=data-protect@solublestudio.com # Sendgrid from email\nDATA_PROTECT_MAIL_SUBJECT=Access for private content # Email subject\nDATA_PROTECT_MAIL_TEMPLATE=login-email.html # Email template you want to use. Check email.html inside serverless folder.\n```\n\n\n## Development mode\n\nWhen you are in development, the API behaviour is mocked in Gatsby DEV server, using the `http://localhost:8000/___dataprotect/login` URL.\nFor this, you can use `demo@demo.demo` as the email that has access to the content.\nTo replicate login (what happens when the user clicks on the email's link), you can use `http://localhost:8000/login/super_secret_token` (in case you use the `8000` port, and `login` as login path)\n\n\n## License\n\nCreated by [Soluble Studio](https://www.solublestudio.com/). Released under the [MIT License](https://github.com/solublestudio/gatsby-plugin-data-protect/blob/master/LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolublestudio%2Fgatsby-plugin-data-protect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolublestudio%2Fgatsby-plugin-data-protect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolublestudio%2Fgatsby-plugin-data-protect/lists"}