From 42ce55cb9b54dc5c3c2ac31e2a4584c0d393976a Mon Sep 17 00:00:00 2001 From: Khaled Garbaya Date: Sat, 18 Jan 2020 22:45:13 +0100 Subject: [PATCH] Add Netlify identity --- gatsby-browser.js | 15 +-- package.json | 1 + src/components/dashboard.js | 189 ++++++++++++++++++++---------------- src/components/login.js | 38 +------- src/services/auth.js | 50 +++++++--- yarn.lock | 5 + 6 files changed, 162 insertions(+), 136 deletions(-) diff --git a/gatsby-browser.js b/gatsby-browser.js index b1e5c31..e3c5c41 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,7 +1,10 @@ -/** - * Implement Gatsby's Browser APIs in this file. - * - * See: https://www.gatsbyjs.org/docs/browser-apis/ - */ +const React = require("react") +const netlifyIdentity = require("netlify-identity-widget") -// You can delete this file if you're not using it +window.netlifyIdentity = netlifyIdentity +// You must run this once before trying to interact with the widget +netlifyIdentity.init() + +exports.wrapRootElement = ({ element }) => { + return <>{element} +} diff --git a/package.json b/package.json index e287507..dcdb078 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "gatsby-plugin-sharp": "^2.3.5", "gatsby-source-filesystem": "^2.1.40", "gatsby-transformer-sharp": "^2.3.7", + "netlify-identity-widget": "^1.5.6", "node-sass": "^4.13.0", "prop-types": "^15.7.2", "react": "^16.12.0", diff --git a/src/components/dashboard.js b/src/components/dashboard.js index 0c98d70..ee0b665 100644 --- a/src/components/dashboard.js +++ b/src/components/dashboard.js @@ -1,92 +1,109 @@ -import React from "react" +import React, { useState } from "react" import { Link } from "gatsby" -const Dashboard = () => ( -
- -
-
-
- - -

- Please fill out this field. -

+import { getCurrentUser, updateUserInfo } from "../services/auth" +const Dashboard = () => { + const [userMetadata, setUserMetaData] = useState( + getCurrentUser().user_metadata + ) + return ( +
+ + { + e.preventDefault() + await updateUserInfo(userMetadata) + }} + > +
+
+ + + setUserMetaData({ + ...userMetadata, + full_name: e.target.value, + }) + } + defaultValue={userMetadata.full_name} + /> +

+
+
+ + +
-
- - +
+
+ + +

+ Make it as long and as crazy as you'd like +

+
-
-
-
- - -

- Make it as long and as crazy as you'd like -

+
+
+ + +

+ Make it the same as the previous one +

+
-
-
-
- - -

- Make it the same as the previous one -

-
-
- - -
-) + + +
+ ) +} export default Dashboard diff --git a/src/components/login.js b/src/components/login.js index ee4a243..e4f6285 100644 --- a/src/components/login.js +++ b/src/components/login.js @@ -11,45 +11,17 @@ class Login extends React.Component { [event.target.name]: event.target.value, }) } - handleSubmit = event => { - event.preventDefault() - handleLogin(this.state) - } + render() { if (isLoggedIn()) { navigate(`/user/dashboard`) } return (
-

Log in

-
{ - this.handleSubmit(event) - navigate(`/user/dashboard`) - }} - > - - - -
+

You must login

+
) } diff --git a/src/services/auth.js b/src/services/auth.js index 514f8a3..d284c5a 100644 --- a/src/services/auth.js +++ b/src/services/auth.js @@ -1,3 +1,4 @@ +import netlifyIdentity from "netlify-identity-widget" export const isBrowser = () => typeof window !== "undefined" export const getUser = () => isBrowser() && window.localStorage.getItem("gatsbyUser") @@ -5,21 +6,48 @@ export const getUser = () => : {} const setUser = user => window.localStorage.setItem("gatsbyUser", JSON.stringify(user)) -export const handleLogin = ({ username, password }) => { - if (username === `john` && password === `pass`) { - return setUser({ - username: `john`, - name: `Johnny`, - email: `johnny@example.org`, + +export const handleLogin = navigate => { + netlifyAuth.authenticate(() => { + setUser(netlifyIdentity.currentUser()) + navigate("/user/dashboard") + }) +} + +const netlifyAuth = { + isAuthenticated: false, + user: null, + authenticate(callback) { + this.isAuthenticated = true + netlifyIdentity.open() + netlifyIdentity.on("login", user => { + this.user = user + callback(user) + }) + }, + signout(callback) { + this.isAuthenticated = false + netlifyIdentity.logout() + netlifyIdentity.on("logout", () => { + this.user = null + callback() }) - } - return false + }, } + export const isLoggedIn = () => { - const user = getUser() - return !!user.username + return netlifyAuth.isAuthenticated } export const logout = callback => { setUser({}) - callback() + netlifyAuth.signout(callback) +} + +export const getCurrentUser = () => { + return netlifyIdentity.currentUser() +} + +export const updateUserInfo = async user_metadata => { + console.log(user_metadata) + await netlifyIdentity.gotrue.currentUser().update({ data: user_metadata }) } diff --git a/yarn.lock b/yarn.lock index d368e5b..46b3d0c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8076,6 +8076,11 @@ neo-async@^2.5.0, neo-async@^2.6.1: resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c" integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw== +netlify-identity-widget@^1.5.6: + version "1.5.6" + resolved "https://registry.yarnpkg.com/netlify-identity-widget/-/netlify-identity-widget-1.5.6.tgz#b841d4d469ad37bdc47e876d87cc2926aba2c302" + integrity sha512-DvWVUGuswOd+IwexKjzIpYcqYMrghmnkmflNqCQc4lG4KX55zE3fFjfXziCTr6LibP7hvZp37s067j5N3kRuyw== + next-tick@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"