From 3e54b80b0c892ed7abccc88613dabfb327f8adba Mon Sep 17 00:00:00 2001 From: swyx Date: Thu, 6 Dec 2018 23:16:44 +0800 Subject: [PATCH 01/21] init --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 3e6e06e..5e26b98 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ .env.development.local .env.test.local .env.production.local +.netlify npm-debug.log* yarn-debug.log* From 49e5a7dfc712c4a30b4ac451ad6d6411cc99c47a Mon Sep 17 00:00:00 2001 From: swyx Date: Fri, 7 Dec 2018 01:33:41 +0800 Subject: [PATCH 02/21] init --- README.md | 94 +-------- package.json | 6 +- src/App.js | 178 +++++++++++++----- src/App.test.js | 9 - src/index.js | 6 - ...{async-chuck-norris.js => authEndPoint.js} | 12 +- src/lambda/hello.js | 11 -- src/serviceWorker.js | 127 ------------- src/useLocalState.js | 26 +++ src/useNetlifyIdentity.js | 103 ++++++++++ yarn.lock | 143 +++++++++++--- 11 files changed, 404 insertions(+), 311 deletions(-) delete mode 100644 src/App.test.js rename src/lambda/{async-chuck-norris.js => authEndPoint.js} (62%) delete mode 100644 src/lambda/hello.js delete mode 100644 src/serviceWorker.js create mode 100644 src/useLocalState.js create mode 100644 src/useNetlifyIdentity.js diff --git a/README.md b/README.md index 73ea314..f52fead 100644 --- a/README.md +++ b/README.md @@ -1,93 +1,5 @@ -This project is based on [Create React App v2](https://github.com/facebookincubator/create-react-app) and [netlify-lambda v1](https://github.com/netlify/netlify-lambda). (For more information about Create react App, check their full [documentation](https://github.com/facebookincubator/create-react-app#create-react-app).) +this is a demo of using Netlify Identity by wrapping the goTrue API in a React Hook. -The main addition is a new folder: `src/lambda`. Each JavaScript file in there will automatically be prepared for Lambda function deployment. +⚠️Make sure Netlify Identity is enabled!!! or demo wont work -As an example, we've included a small `src/lambda/hello.js` function, which will be deployed to `/.netlify/functions/hello`. We've also included an async lambda example using async/await syntax in `async-chuck-norris.js`. - -[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/create-react-app-lambda) - -## Babel/webpack compilation - -All functions are compiled with webpack using the Babel Loader, so you can use modern JavaScript, import npm modules, etc., without any extra setup. - -## Local Development - -Before developing, clone the repository and run `yarn` from the root of the repo to install all dependencies. - -### Option 1: Starting both servers at once - -Most people should be able to get up and running just by running: - -```bash -yarn start -``` - -This uses [npm-run-all](https://github.com/mysticatea/npm-run-all#readme) to run the functions dev server and app dev server concurrently. - -### Option 2: Start each server individually - -**Run the functions dev server** - -From inside the project folder, run: - -``` -yarn start:lambda -``` - -This will open a local server running at `http://localhost:9000` serving your Lambda functions, updating as you make changes in the `src/lambda` folder. - -You can then access your functions directly at `http://localhost:9000/{function_name}`, but to access them with the app, you'll need to start the app dev server. Under the hood, this uses `react-scripts`' [advanced proxy feature](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually) with the `setupProxy.js` file. - -**Run the app dev server** - -While the functions server is still running, open a new terminal tab and run: - -``` -yarn start:app -``` - -This will start the normal create-react-app dev server and open your app at `http://localhost:3000`. - -Local in-app requests to the relative path `/.netlify/functions/*` will automatically be proxied to the local functions dev server. - -
- - Typescript - -You can use Typescript in both your React code (with `react-scripts` v2.1+) and your lambda functions )with `netlify-lambda` v1.1+). Follow these instructions: - -1. `yarn add -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript @types/aws-lambda` -2. convert `src/lambda/hello.js` to `src/lambda/hello.ts` -3. use types in your event handler: - -```ts -import { Handler, Context, Callback } from 'aws-lambda'; - -interface HelloResponse { - statusCode: number; - body: string; -} - -const handler: Handler = (event: any, context: Context, callback: Callback) => { - const response: HelloResponse = { - statusCode: 200, - body: JSON.stringify({ - msg: `Hello world ${Math.floor(Math.random() * 10)}` - }) - }; - - callback(undefined, response); -}; - -export { handler }; -``` - -rerun and see it work! - -You are free to set up your `tsconfig.json` and `tslint` as you see fit. - -
- -## Service Worker - -The service worker does not work with lambda functions out of the box. It prevents calling the function and returns the app itself instead ([Read more](https://github.com/facebook/create-react-app/issues/2237#issuecomment-302693219)). To solve this you have to eject and enhance the service worker configuration in the webpack config. Whitelist the path of your lambda function and you are good to go. +Reach Router is used to show authentication as per [Ryan Florence](https://twitter.com/ryanflorence/status/1060361144701833216). diff --git a/package.json b/package.json index 45d86e8..4f8562e 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,11 @@ "version": "0.4.0", "private": true, "dependencies": { + "@reach/router": "^1.2.1", + "gotrue-js": "^0.9.22", "node-fetch": "^2.3.0", - "react": "^16.6.3", - "react-dom": "^16.6.3", + "react": "^16.7.0-alpha.2", + "react-dom": "^16.7.0-alpha.2", "react-scripts": "^2.1.1" }, "scripts": { diff --git a/src/App.js b/src/App.js index adf8cf6..4b57dd7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,54 +1,146 @@ -import React, { Component } from 'react'; -import logo from './logo.svg'; +import React from 'react'; +import { Router, Link, navigate } from '@reach/router'; import './App.css'; +import { useNetlifyIdentity } from './useNetlifyIdentity'; -class LambdaDemo extends Component { - constructor(props) { - super(props); - this.state = { loading: false, msg: null }; - } +let IdentityContext = React.createContext(); - handleClick = api => e => { - e.preventDefault(); +function PrivateRoute(props) { + const identity = React.useContext(IdentityContext); + let { as: Comp, ...rest } = props; + return identity.user ? ( + + ) : ( +
+

You are trying to view a protected page. Please log in

+ +
+ ); +} - this.setState({ loading: true }); - fetch('/.netlify/functions/' + api) - .then(response => response.json()) - .then(json => this.setState({ loading: false, msg: json.msg })); +function Login() { + const { loginUser, signupUser } = React.useContext(IdentityContext); + const formRef = React.useRef(); + const [msg, setMsg] = React.useState(''); + const signup = () => { + const email = formRef.current.email.value; + const password = formRef.current.password.value; + signupUser(email, password) + .then(user => { + console.log('Success! Signed up', user); + navigate('/dashboard'); + }) + .catch(err => console.error(err) || setMsg('Error: ' + err.message)); }; + return ( +
{ + e.preventDefault(); + const email = e.target.email.value; + const password = e.target.password.value; + loginUser(email, password) + .then(user => { + console.log('Success! Logged in', user); + navigate('/dashboard'); + }) + .catch(err => console.error(err) || setMsg('Error: ' + err.message)); + }} + > +
+
+ +
+
+ +
+
+ + + {msg && 
{msg}
} +
+
+
+ ); +} + +function Home() { + return ( +
+

Welcome to the Home page!

+

this is not behind an authentication wall

+
+ ); +} + +function About() { + return
About
; +} + +function Dashboard() { + const props = React.useContext(IdentityContext); + console.log({ props }); + const { isConfirmedUser, authedFetch } = props; + const [msg, setMsg] = React.useState('Click to load something'); + const handler = () => { + authedFetch.get('/.netlify/functions/authEndPoint').then(setMsg); + }; + return ( +
+

This is a Protected Dashboard!

+ {!isConfirmedUser && 
You have not confirmed your email.
} +
+
+ You can try pinging our authenticated API here. If you are logged in, + you should be able to see a `user` info here. + + 
{JSON.stringify(msg, null, 2)}
+
+
+ ); +} +function Nav() { + const { isLoggedIn } = React.useContext(IdentityContext); + return ( + + ); +} +function Logout() { + const { logoutUser } = React.useContext(IdentityContext); + return ; +} - render() { - const { loading, msg } = this.state; - - return ( -

- - -
- {msg} -

- ); - } -} - -class App extends Component { - render() { - return ( +function App() { + const identity = useNetlifyIdentity( + 'https://optimistic-dubinsky-dacadd.netlify.com' + ); + return ( +
-
- logo -

- Edit src/App.js and save to reload. -

- -
+

Netlify Identity + Reach Router demo

+
- ); - } + + ); } export default App; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index a754b20..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/index.js b/src/index.js index 0c5e75d..395b749 100644 --- a/src/index.js +++ b/src/index.js @@ -2,11 +2,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; -import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: http://bit.ly/CRA-PWA -serviceWorker.unregister(); diff --git a/src/lambda/async-chuck-norris.js b/src/lambda/authEndPoint.js similarity index 62% rename from src/lambda/async-chuck-norris.js rename to src/lambda/authEndPoint.js index b9ace2a..0e57a7d 100644 --- a/src/lambda/async-chuck-norris.js +++ b/src/lambda/authEndPoint.js @@ -3,6 +3,16 @@ import fetch from 'node-fetch'; export async function handler(event, context) { + if (!context.clientContext && !context.clientContext.identity) { + return { + statusCode: 500, + body: JSON.stringify({ + msg: + 'No identity instance detected. Did you enable it? Also, Netlify Identity is not supported on local dev yet.' + }) // Could be a custom message or object i.e. JSON.stringify(err) + }; + } + const { identity, user } = context.clientContext; try { const response = await fetch('https://api.chucknorris.io/jokes/random'); if (!response.ok) { @@ -13,7 +23,7 @@ export async function handler(event, context) { return { statusCode: 200, - body: JSON.stringify({ msg: data.value }) + body: JSON.stringify({ identity, user, msg: data.value }) }; } catch (err) { console.log(err); // output to netlify function log diff --git a/src/lambda/hello.js b/src/lambda/hello.js deleted file mode 100644 index 1a2ea27..0000000 --- a/src/lambda/hello.js +++ /dev/null @@ -1,11 +0,0 @@ -// show object spread works, i.e. babel works -const obj = { - foo: 'bar' -}; -export function handler(event, context, callback) { - console.log('queryStringParameters', event.queryStringParameters); - callback(null, { - statusCode: 200, - body: JSON.stringify({ msg: 'Hello, World!', ...obj }) - }); -} diff --git a/src/serviceWorker.js b/src/serviceWorker.js deleted file mode 100644 index 46c98a4..0000000 --- a/src/serviceWorker.js +++ /dev/null @@ -1,127 +0,0 @@ -// In production, we register a service worker to serve assets from local cache. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on the "N+1" visit to a page, since previously -// cached resources are updated in the background. - -// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. -// This link also includes instructions on opting out of this behavior. - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); - -export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://goo.gl/SC7cgQ' - ); - }); - } else { - // Is not local host. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl, config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the old content will have been purged and - // the fresh content will have been added to the cache. - // It's the perfect time to display a "New content is - // available; please refresh." message in your web app. - console.log('New content is available; please refresh.'); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl, config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - if ( - response.status === 404 || - response.headers.get('content-type').indexOf('javascript') === -1 - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); - } -} diff --git a/src/useLocalState.js b/src/useLocalState.js new file mode 100644 index 0000000..97d9382 --- /dev/null +++ b/src/useLocalState.js @@ -0,0 +1,26 @@ +import React from 'react'; + +const noop = () => {}; +export default function useLocalStorage(key, optionalCallback = noop) { + const [state, setState] = React.useState(null); + React.useEffect(() => { + // chose to make this async + const existingValue = localStorage.getItem(key); + if (existingValue) { + const parsedValue = JSON.parse(existingValue); + setState(parsedValue); + optionalCallback(parsedValue); + } + }, []); + const removeItem = () => { + setState(null); + localStorage.removeItem(key); + optionalCallback(null); + }; + const setItem = obj => { + setState(obj); + localStorage.setItem(key, JSON.stringify(obj)); + optionalCallback(obj); + }; + return [state, setItem, removeItem]; +} diff --git a/src/useNetlifyIdentity.js b/src/useNetlifyIdentity.js new file mode 100644 index 0000000..0c7dead --- /dev/null +++ b/src/useNetlifyIdentity.js @@ -0,0 +1,103 @@ +import React from 'react'; +import GoTrue from 'gotrue-js'; +import useLocalState from './useLocalState'; + +export function useNetlifyIdentity(domain, onAuthChange = () => {}) { + const authRef = React.useRef( + new GoTrue({ + APIUrl: `${domain}/.netlify/identity`, + setCookie: true + }) + ); + + const [user, setUser, clearUser] = useLocalState( + 'netlifyIdentityUserDemo', + onAuthChange + ); + const _setUser = _user => { + if (!_user) clearUser(); + else setUser(_user); + onAuthChange(_user); // if someone's subscribed to auth changes, let 'em know + return _user; // so that we can continue chaining + }; + /******* OPERATIONS */ + // make sure the Registration preferences under Identity settings in your Netlify dashboard are set to Open. + const signupUser = (email, password) => + authRef.current.signup(email, password).then(_setUser); // TODO: make setUser optional? + const loginUser = (email, password) => + authRef.current.login(email, password).then(_setUser); + const requestPasswordRecovery = email => + authRef.current.requestPasswordRecovery(email); + const recoverAccount = token => authRef.current.recover(token); + const updateUser = fields => { + const user = authRef.current.currentUser(); + return user + .update(fields) // e.g. { email: "example@example.com", password: "password" } + .then(_setUser); + }; + const getFreshJWT = () => { + const user = authRef.current.currentUser(); + return user.jwt(); + }; + const logoutUser = () => { + const user = authRef.current.currentUser(); + return user.logout().then(() => _setUser(null)); + }; + + const genericAuthedFetch = method => (endpoint, obj = {}) => { + if (!user || !user.token || !user.token.access_token) + throw new Error('no user token found'); + const defaultObj = { + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + user.token.access_token + } + }; + const finalObj = Object.assign(defaultObj, { method }, obj); + return fetch(endpoint, finalObj).then(res => + finalObj.headers['Content-Type'] === 'application/json' ? res.json() : res + ); + }; + const authedFetch = { + get: genericAuthedFetch('GET'), + post: genericAuthedFetch('POST'), + put: genericAuthedFetch('PUT'), + delete: genericAuthedFetch('DELETE') + }; + + // // confirmation + // http://lea.verou.me/2011/05/get-your-hash-the-bulletproof-way/ + React.useEffect(() => { + const hash = window.location.hash.substring(1); + if (hash.slice(0, 19) === 'confirmation_token=') { + // we are in a confirmation! + const token = hash.slice(19); + authRef.current + .confirm(token) + .then(_setUser) + .catch(console.error); + // .then( + // () => + // (window.location = + // window.location.origin + window.location.pathname) // strip hash + // ) + } + }, []); + + /******* hook API */ + return { + user, + setUser, // use carefully!! mostly you should use the methods below + isConfirmedUser: !!(user && user.confirmed_at), + isLoggedIn: !!user, + signupUser, + loginUser, + logoutUser, + requestPasswordRecovery, + recoverAccount, + updateUser, + getFreshJWT, + authedFetch + }; +} diff --git a/yarn.lock b/yarn.lock index 4224596..a642df6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -919,6 +919,17 @@ resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b" integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw== +"@reach/router@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e" + integrity sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ== + dependencies: + create-react-context "^0.2.1" + invariant "^2.2.3" + prop-types "^15.6.1" + react-lifecycles-compat "^3.0.4" + warning "^3.0.0" + "@svgr/core@^2.4.1": version "2.4.1" resolved "https://registry.yarnpkg.com/@svgr/core/-/core-2.4.1.tgz#03a407c28c4a1d84305ae95021e8eabfda8fa731" @@ -1485,7 +1496,7 @@ arrify@^1.0.0, arrify@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" -asap@~2.0.6: +asap@~2.0.3, asap@~2.0.6: version "2.0.6" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" @@ -2538,6 +2549,11 @@ core-js@2.5.7, core-js@^2.4.0, core-js@^2.5.0: version "2.5.7" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e" +core-js@^1.0.0: + version "1.2.7" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" + integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY= + core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" @@ -2590,6 +2606,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-react-context@^0.2.1: + version "0.2.3" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3" + integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag== + dependencies: + fbjs "^0.8.0" + gud "^1.0.0" + cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5: version "6.0.5" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4" @@ -3184,6 +3208,13 @@ encodeurl@~1.0.2: resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k= +encoding@^0.1.11: + version "0.1.12" + resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb" + integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s= + dependencies: + iconv-lite "~0.4.13" + end-of-stream@^1.0.0, end-of-stream@^1.1.0: version "1.4.1" resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43" @@ -3683,6 +3714,19 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" +fbjs@^0.8.0: + version "0.8.17" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" + integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.18" + figgy-pudding@^3.1.0, figgy-pudding@^3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790" @@ -4089,6 +4133,13 @@ globby@^6.1.0: pify "^2.0.0" pinkie-promise "^2.0.0" +gotrue-js@^0.9.22: + version "0.9.22" + resolved "https://registry.yarnpkg.com/gotrue-js/-/gotrue-js-0.9.22.tgz#2f013c59caba5a17b47ad856cd140842190f93c5" + integrity sha512-i7onzXLP41YHs/S6LFk7mactBSIBb/Xib1dsvYMYu4e45HVLJlEYW1u016DVbh5mMFtyCace6QUbC7lHpG/hNw== + dependencies: + micro-api-client "^3.2.1" + graceful-fs@^4.1.11, graceful-fs@^4.1.2: version "4.1.15" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00" @@ -4102,6 +4153,11 @@ growly@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" +gud@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" + integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== + gzip-size@5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.0.0.tgz#a55ecd99222f4c48fd8c01c625ce3b349d0a0e80" @@ -4423,7 +4479,7 @@ iconv-lite@0.4.23: dependencies: safer-buffer ">= 2.1.2 < 3" -iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4: +iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" dependencies: @@ -4563,7 +4619,7 @@ internal-ip@^3.0.1: default-gateway "^2.6.0" ipaddr.js "^1.5.2" -invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4: +invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" dependencies: @@ -4848,7 +4904,7 @@ is-root@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.0.0.tgz#838d1e82318144e5a6f77819d90207645acc7019" -is-stream@^1.1.0: +is-stream@^1.0.1, is-stream@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44" @@ -4912,6 +4968,14 @@ isobject@^3.0.0, isobject@^3.0.1: resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8= +isomorphic-fetch@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" + integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk= + dependencies: + node-fetch "^1.0.1" + whatwg-fetch ">=0.10.0" + isstream@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" @@ -5757,6 +5821,11 @@ methods@~1.1.2: resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee" integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4= +micro-api-client@^3.2.1: + version "3.3.0" + resolved "https://registry.yarnpkg.com/micro-api-client/-/micro-api-client-3.3.0.tgz#52dd567d322f10faffe63d19d4feeac4e4ffd215" + integrity sha512-y0y6CUB9RLVsy3kfgayU28746QrNMpSm9O/AYGNsBgOkJr/X/Jk0VLGoO8Ude7Bpa8adywzF+MzXNZRFRsNPhg== + micromatch@^2.3.11: version "2.3.11" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-2.3.11.tgz#86677c97d1720b363431d04d0d15293bd38c1565" @@ -6046,6 +6115,14 @@ no-case@^2.2.0: dependencies: lower-case "^1.1.1" +node-fetch@^1.0.1: + version "1.7.3" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" + integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ== + dependencies: + encoding "^0.1.11" + is-stream "^1.0.1" + node-fetch@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.3.0.tgz#1a1d940bbfb916a1d3e0219f037e89e71f8c5fa5" @@ -7274,6 +7351,13 @@ promise@8.0.2: dependencies: asap "~2.0.6" +promise@^7.1.1: + version "7.3.1" + resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" + integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg== + dependencies: + asap "~2.0.3" + prompts@^0.1.9: version "0.1.14" resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.14.tgz#a8e15c612c5c9ec8f8111847df3337c9cbd443b2" @@ -7281,7 +7365,7 @@ prompts@^0.1.9: kleur "^2.0.1" sisteransi "^0.1.1" -prop-types@^15.6.2: +prop-types@^15.6.1, prop-types@^15.6.2: version "15.6.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ== @@ -7475,21 +7559,26 @@ react-dev-utils@^6.1.1: strip-ansi "4.0.0" text-table "0.2.0" -react-dom@^16.6.3: - version "16.6.3" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0" - integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ== +react-dom@^16.7.0-alpha.2: + version "16.7.0-alpha.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.2.tgz#16632880ed43676315991d8b412cce6975a30282" + integrity sha512-o0mMw8jBlwHjGZEy/vvKd/6giAX0+skREMOTs3/QHmgi+yAhUClp4My4Z9lsKy3SXV+03uPdm1l/QM7NTcGuMw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.11.2" + scheduler "^0.12.0-alpha.2" react-error-overlay@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.0.tgz#c516995a5652e7bfbed8b497910d5280df74a7e8" integrity sha512-akMy/BQT5m1J3iJIHkSb4qycq2wzllWsmmolaaFVnb+LPV9cIJ/nTud40ZsiiT0H3P+/wXIdbjx2fzF61OaeOQ== +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react-scripts@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-2.1.1.tgz#c2959a756b0b61d3090adece0d7aedd324dff8a5" @@ -7545,15 +7634,15 @@ react-scripts@^2.1.1: optionalDependencies: fsevents "1.2.4" -react@^16.6.3: - version "16.6.3" - resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c" - integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw== +react@^16.7.0-alpha.2: + version "16.7.0-alpha.2" + resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.2.tgz#924f2ae843a46ea82d104a8def7a599fbf2c78ce" + integrity sha512-Xh1CC8KkqIojhC+LFXd21jxlVtzoVYdGnQAi/I2+dxbmos9ghbx5TQf9/nDxc4WxaFfUQJkya0w1k6rMeyIaxQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.11.2" + scheduler "^0.12.0-alpha.2" read-pkg-up@^1.0.1: version "1.0.1" @@ -7963,10 +8052,10 @@ sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" -scheduler@^0.11.2: - version "0.11.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.2.tgz#a8db5399d06eba5abac51b705b7151d2319d33d3" - integrity sha512-+WCP3s3wOaW4S7C1tl3TEXp4l9lJn0ZK8G3W3WKRWmw77Z2cIFUW2MiNTMHn5sCjxN+t7N43HAOOgMjyAg5hlg== +scheduler@^0.12.0-alpha.2: + version "0.12.0-alpha.3" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.12.0-alpha.3.tgz#59afcaba1cb79e3e8bee91de94eb8f42c9152c2b" + integrity sha512-KADuBlOWSrT/DCt/oA+NgsNamRCsfz7wj+leaeGjGHipNClsqhjOPogKkJgem6WLAv/QzxW8bE7zlGc9OxiYSQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" @@ -8071,7 +8160,7 @@ set-value@^2.0.0: is-plain-object "^2.0.3" split-string "^3.0.1" -setimmediate@^1.0.4: +setimmediate@^1.0.4, setimmediate@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU= @@ -8754,6 +8843,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +ua-parser-js@^0.7.18: + version "0.7.19" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b" + integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ== + uglify-es@^3.3.4: version "3.3.9" resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677" @@ -8990,6 +9084,13 @@ walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w= + dependencies: + loose-envify "^1.0.0" + watch@~0.18.0: version "0.18.0" resolved "https://registry.yarnpkg.com/watch/-/watch-0.18.0.tgz#28095476c6df7c90c963138990c0a5423eb4b986" @@ -9164,7 +9265,7 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3: dependencies: iconv-lite "0.4.24" -whatwg-fetch@3.0.0: +whatwg-fetch@3.0.0, whatwg-fetch@>=0.10.0: version "3.0.0" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb" From 248d2bc9940cb14f9851d820c40cf66da7bee0ee Mon Sep 17 00:00:00 2001 From: swyx Date: Fri, 7 Dec 2018 01:54:03 +0800 Subject: [PATCH 03/21] url --- _redirects | 1 + src/App.js | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 _redirects diff --git a/_redirects b/_redirects new file mode 100644 index 0000000..f824337 --- /dev/null +++ b/_redirects @@ -0,0 +1 @@ +/* /index.html 200 \ No newline at end of file diff --git a/src/App.js b/src/App.js index 4b57dd7..395a4be 100644 --- a/src/App.js +++ b/src/App.js @@ -124,9 +124,8 @@ function Logout() { } function App() { - const identity = useNetlifyIdentity( - 'https://optimistic-dubinsky-dacadd.netlify.com' - ); + console.log('URL', process.env.URL); + const identity = useNetlifyIdentity(process.env.URL); return (
From 7c871e18d2f6e61b457143be51c7faaf0642ae58 Mon Sep 17 00:00:00 2001 From: swyx Date: Fri, 7 Dec 2018 01:59:54 +0800 Subject: [PATCH 04/21] url --- src/App.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 395a4be..ee758b4 100644 --- a/src/App.js +++ b/src/App.js @@ -124,8 +124,11 @@ function Logout() { } function App() { - console.log('URL', process.env.URL); - const identity = useNetlifyIdentity(process.env.URL); + const identity = useNetlifyIdentity( + // TODO: CHANGE THIS URL IF YOU ARE USING A DIFFERENT NETLIFY INSTANCE + 'http://festive-nightingale-47f180.netlify.com' + // TODO: CHANGE THIS URL IF YOU ARE USING A DIFFERENT NETLIFY INSTANCE + ); return (
From 05b5084dbf7500c016a7832be458680e13afe422 Mon Sep 17 00:00:00 2001 From: swyx Date: Fri, 7 Dec 2018 02:00:53 +0800 Subject: [PATCH 05/21] url --- src/useNetlifyIdentity.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/useNetlifyIdentity.js b/src/useNetlifyIdentity.js index 0c7dead..9453123 100644 --- a/src/useNetlifyIdentity.js +++ b/src/useNetlifyIdentity.js @@ -1,6 +1,6 @@ import React from 'react'; import GoTrue from 'gotrue-js'; -import useLocalState from './useLocalState'; +// import useLocalState from './useLocalState'; export function useNetlifyIdentity(domain, onAuthChange = () => {}) { const authRef = React.useRef( @@ -10,13 +10,9 @@ export function useNetlifyIdentity(domain, onAuthChange = () => {}) { }) ); - const [user, setUser, clearUser] = useLocalState( - 'netlifyIdentityUserDemo', - onAuthChange - ); + const [user, setUser] = React.useState(null); const _setUser = _user => { - if (!_user) clearUser(); - else setUser(_user); + setUser(_user); onAuthChange(_user); // if someone's subscribed to auth changes, let 'em know return _user; // so that we can continue chaining }; From bd7ea053f317e3d4035ff5d56935e3024327a9d0 Mon Sep 17 00:00:00 2001 From: swyx Date: Fri, 7 Dec 2018 02:04:47 +0800 Subject: [PATCH 06/21] https --- _redirects => public/_redirects | 0 src/App.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename _redirects => public/_redirects (100%) diff --git a/_redirects b/public/_redirects similarity index 100% rename from _redirects rename to public/_redirects diff --git a/src/App.js b/src/App.js index ee758b4..e7dd502 100644 --- a/src/App.js +++ b/src/App.js @@ -126,7 +126,7 @@ function Logout() { function App() { const identity = useNetlifyIdentity( // TODO: CHANGE THIS URL IF YOU ARE USING A DIFFERENT NETLIFY INSTANCE - 'http://festive-nightingale-47f180.netlify.com' + 'https://festive-nightingale-47f180.netlify.com' // TODO: CHANGE THIS URL IF YOU ARE USING A DIFFERENT NETLIFY INSTANCE ); return ( From 50b2e6a68f5018c814cf013d1931cde2f159880a Mon Sep 17 00:00:00 2001 From: swyx Date: Fri, 7 Dec 2018 02:18:27 +0800 Subject: [PATCH 07/21] generalize --- src/App.js | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index e7dd502..8ba287d 100644 --- a/src/App.js +++ b/src/App.js @@ -124,15 +124,34 @@ function Logout() { } function App() { - const identity = useNetlifyIdentity( - // TODO: CHANGE THIS URL IF YOU ARE USING A DIFFERENT NETLIFY INSTANCE - 'https://festive-nightingale-47f180.netlify.com' - // TODO: CHANGE THIS URL IF YOU ARE USING A DIFFERENT NETLIFY INSTANCE - ); + // TODO: CHANGE THIS URL IF YOU ARE USING A DIFFERENT NETLIFY INSTANCE + // e.g. 'https://unruffled-roentgen-04c3b8.netlify.com' + const [url, setUrl] = React.useState(window.location.origin); + const handler = e => setUrl(e.target.value); + const identity = useNetlifyIdentity(url); return (

Netlify Identity + Reach Router demo

+