add login, logout, signup callbacks

sw-yx · sw-yx · commit eb9ecdb2294a · 2019-09-09T10:44:24.000-04:00
diff --git a/README.md b/README.md
@@ -8,11 +8,7 @@ the demo is hosted at: https://react-netlify-identity-widget.netlify.com (you ca
 
 and the source is in `/examples`.
 
-## Blogposts
-
-- [Add Netlify Identity Authentication to any React App in 5 minutes with React Context, Hooks and Suspense](https://dev.to/swyx/add-netlify-identity-authentication-to-any-react-app-in-5-minutes-with-react-context-hooks-and-suspense-5gci)
-
-## usage
+## Usage
 
 we require some peer dependencies:
 
@@ -23,13 +19,13 @@ yarn add react-netlify-identity-widget @reach/dialog @reach/tabs @reach/visually
 and the styles are optional but provided. here's how to use `IdentityModal, useIdentityContext, IdentityContextProvider`:
 
 ```tsx
-import React from "react"
-import "./App.css"
-import IdentityModal, { useIdentityContext, IdentityContextProvider } from "react-netlify-identity-widget"
-import "react-netlify-identity-widget/styles.css"
+import React from 'react'
+import './App.css'
+import IdentityModal, { useIdentityContext, IdentityContextProvider } from 'react-netlify-identity-widget'
+import 'react-netlify-identity-widget/styles.css'
 
 function App() {
-  const url = "https://your-identity-instance.netlify.com/" // supply the url of your Netlify site instance. VERY IMPORTANT. no point putting in env var since this is public anyway
+  const url = 'https://your-identity-instance.netlify.com/' // supply the url of your Netlify site instance. VERY IMPORTANT. no point putting in env var since this is public anyway
   return (
     <IdentityContextProvider url={url}>
       <AuthStatusView />
@@ -42,16 +38,22 @@ function AuthStatusView() {
   const identity = useIdentityContext()
   const [dialog, setDialog] = React.useState(false)
   const name =
-    (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.name) || "NoName"
+    (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.name) || 'NoName'
   const isLoggedIn = identity && identity.isLoggedIn
   return (
     <div>
       <div>
         <button className="btn" onClick={() => setDialog(true)}>
-          {isLoggedIn ? `Hello ${name}, Log out here!` : "Log In"}
+          {isLoggedIn ? `Hello ${name}, Log out here!` : 'Log In'}
         </button>
       </div>
-      <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
+      <IdentityModal
+        showDialog={dialog}
+        onCloseDialog={() => setDialog(false)}
+        onLogin={(user) => console.log('hello ', user.user_metadata)}
+        onSignup={(user) => console.log('welcome ', user.user_metadata)}
+        onLogout={() => console.log('bye ', name)}
+      />
     </div>
   )
 }
@@ -61,7 +63,7 @@ You may also code split the Modal if you wish with `React.lazy` and `React.Suspe
 
 ```js
 // code split the modal til you need it!
-const IdentityModal = React.lazy(() => import("react-netlify-identity-widget"))
+const IdentityModal = React.lazy(() => import('react-netlify-identity-widget'))
 
 function AuthStatusView() {
   // ...
@@ -76,6 +78,10 @@ function AuthStatusView() {
 }
 ```
 
+## Blogposts
+
+- [Add Netlify Identity Authentication to any React App in 5 minutes with React Context, Hooks and Suspense](https://dev.to/swyx/add-netlify-identity-authentication-to-any-react-app-in-5-minutes-with-react-context-hooks-and-suspense-5gci)
+
 ## Gatsby plugin
 
 You may get a little help configuring RNIW for usage with Gatsby by using https://github.com/sw-yx/gatsby-plugin-netlify-identity. Read its README for more info.
diff --git a/src/app.tsx b/src/app.tsx
@@ -1,12 +1,17 @@
-import React from "react"
-import { Login } from "./components/login"
-import { Logout } from "./components/logout"
-import { Signup } from "./components/signup"
-import { useIdentityContext } from "react-netlify-identity"
-import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs"
+import React from 'react'
+import { Login } from './components/login'
+import { Logout } from './components/logout'
+import { Signup } from './components/signup'
+import { User, useIdentityContext } from 'react-netlify-identity'
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@reach/tabs'
 
-import { Providers } from "./components/providers"
-function LoggedOutScreen() {
+import { Providers } from './components/providers'
+export type AuthProps = {
+  onLogin?: (user?: User) => void
+  onSignup?: (user?: User) => void
+  onLogout?: () => void
+}
+function LoggedOutScreen(props: AuthProps) {
   return (
     <div>
       <Tabs defaultIndex={0}>
@@ -17,10 +22,10 @@ function LoggedOutScreen() {
 
         <TabPanels>
           <TabPanel>
-            <Login />
+            <Login onLogin={props.onLogin} />
           </TabPanel>
           <TabPanel>
-            <Signup />
+            <Signup onSignup={props.onSignup} />
           </TabPanel>
         </TabPanels>
       </Tabs>
@@ -29,16 +34,12 @@ function LoggedOutScreen() {
   )
 }
 
-function LoggedInScreen() {
-  return <Logout />
+function LoggedInScreen(props: AuthProps) {
+  return <Logout onLogout={props.onLogout} />
 }
 
-function Gate({  }: { onCloseDialog: Function }) {
+export function Widget(props: AuthProps) {
   const identity = useIdentityContext()
   const isLoggedIn = Boolean(identity && identity.user)
-  return isLoggedIn ? <LoggedInScreen /> : <LoggedOutScreen />
-}
-
-export function Widget({ onCloseDialog }: { onCloseDialog: Function }) {
-  return <Gate onCloseDialog={onCloseDialog} />
+  return isLoggedIn ? <LoggedInScreen {...props} /> : <LoggedOutScreen {...props} />
 }
diff --git a/src/components/login.tsx b/src/components/login.tsx
@@ -1,25 +1,17 @@
-import React from "react"
-import { useIdentityContext } from "react-netlify-identity"
-import useLoading from "../useLoading"
-import VisuallyHidden from "@reach/visually-hidden"
+import React from 'react'
+import { useIdentityContext, User } from 'react-netlify-identity'
+import useLoading from '../useLoading'
+import VisuallyHidden from '@reach/visually-hidden'
 
-export function Login() {
+type LoginProps = {
+  onLogin?: (user?: User) => void
+}
+
+export function Login({ onLogin }: LoginProps) {
   const { loginUser } = useIdentityContext()
   const formRef = React.useRef<HTMLFormElement>(null)
-  const [msg, setMsg] = React.useState("")
+  const [msg, setMsg] = React.useState('')
   const [isLoading, load] = useLoading()
-  // const signup = () => {
-  //   if (!formRef.current) return
-  //   const email = formRef.current.email.value
-  //   const password = formRef.current.password.value
-  //   const data = { signupSource: "react-netlify-identity-widget" }
-  //   load(signupUser(email, password, data))
-  //     .then(user => {
-  //       console.log("Success! Signed up", user)
-  //       // navigate("/dashboard")
-  //     })
-  //     .catch(err => void console.error(err) || setMsg("Error: " + err.message))
-  // }
   return (
     <form
       ref={formRef}
@@ -31,10 +23,10 @@ export function Login() {
         const password = target.password.value
         load(loginUser(email, password, true))
           .then((user) => {
-            console.log("Success! Logged in", user)
-            // navigate("/dashboard")
+            if (process.env.NODE_ENV !== 'production') console.log('Success! Logged in', user)
+            if (onLogin) onLogin(user)
           })
-          .catch((err) => void console.error(err) || setMsg("Error: " + err.message))
+          .catch((err) => void console.error(err) || setMsg('Error: ' + err.message))
       }}
     >
       <div className="formGroup" key="email">
@@ -60,10 +52,10 @@ export function Login() {
       </div>
 
       <div>
-        <button type="submit" className={isLoading ? "btn saving" : "btn"}>
+        <button type="submit" className={isLoading ? 'btn saving' : 'btn'}>
           Log in
         </button>
-        {msg && <pre style={{ background: "salmon", padding: 10 }}>{msg}</pre>}
+        {msg && <pre style={{ background: 'salmon', padding: 10 }}>{msg}</pre>}
       </div>
       <button type="button" className="btnLink forgotPasswordLink">
         Forgot password?
diff --git a/src/components/logout.tsx b/src/components/logout.tsx
@@ -1,14 +1,24 @@
-import React from "react"
-import { useIdentityContext } from "react-netlify-identity"
-import useLoading from "../useLoading"
+import React from 'react'
+import { useIdentityContext } from 'react-netlify-identity'
+import useLoading from '../useLoading'
 
-export function Logout() {
+type LogoutProps = {
+  onLogout?: () => void
+}
+
+export function Logout({ onLogout }: LogoutProps) {
   const identity = useIdentityContext()
+  const [msg, setMsg] = React.useState('')
   const name =
-    (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.full_name) || "NoName"
+    (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.full_name) || 'NoName'
 
   const [isLoading, load] = useLoading()
-  const logout = () => load(identity.logoutUser())
+  const logout = () =>
+    load(identity.logoutUser())
+      .then(() => {
+        if (onLogout) onLogout()
+      })
+      .catch((err) => void console.error(err) || setMsg('Error: ' + err.message))
   return (
     <>
       <div className="header">
@@ -19,9 +29,10 @@ export function Logout() {
           Logged in as <br />
           <span className="infoTextEmail">{name}</span>
         </p>
-        <button type="submit" className={isLoading ? "btn saving" : "btn"} onClick={logout}>
+        <button type="submit" className={isLoading ? 'btn saving' : 'btn'} onClick={logout}>
           Log out
         </button>
+        {msg && <pre style={{ background: 'salmon', padding: 10 }}>{msg}</pre>}
       </form>
     </>
   )
diff --git a/src/components/recover.tsx b/src/components/recover.tsx
@@ -1,8 +1,9 @@
-import React from "react"
+import React from 'react'
 
 export function Recover() {
   return (
     <div>
+      <h1>TODO: NOT IMPLEMENTED YET</h1>
       <label>
         Email
         <input type="email" />
diff --git a/src/components/signup.tsx b/src/components/signup.tsx
@@ -1,25 +1,28 @@
-import React from "react"
-import { useIdentityContext } from "react-netlify-identity"
-import useLoading from "../useLoading"
-import VisuallyHidden from "@reach/visually-hidden"
+import React from 'react'
+import { User, useIdentityContext } from 'react-netlify-identity'
+import useLoading from '../useLoading'
+import VisuallyHidden from '@reach/visually-hidden'
 
-export function Signup() {
+type SignupProps = {
+  onSignup?: (user?: User) => void
+}
+export function Signup({ onSignup }: SignupProps) {
   const { signupUser } = useIdentityContext()
   const formRef = React.useRef<HTMLFormElement>(null)
-  const [msg, setMsg] = React.useState("")
+  const [msg, setMsg] = React.useState('')
   const [isLoading, load] = useLoading()
   const signup = () => {
     if (!formRef.current) return
     const full_name = formRef.current.username.value
     const email = formRef.current.email.value
     const password = formRef.current.password.value
-    const data = { signupSource: "react-netlify-identity-widget", full_name }
+    const data = { signupSource: 'react-netlify-identity-widget', full_name }
     load(signupUser(email, password, data))
       .then((user) => {
-        console.log("Success! Signed up", user)
-        // navigate("/dashboard")
+        if (process.env.NODE_ENV !== 'production') console.log('Success! Signed up', user)
+        if (onSignup) onSignup(user)
       })
-      .catch((err) => void console.error(err) || setMsg("Error: " + err.message))
+      .catch((err) => void console.error(err) || setMsg('Error: ' + err.message))
   }
   return (
     <form
@@ -67,10 +70,10 @@ export function Signup() {
         </label>
       </div>
       <div>
-        <button type="submit" className={isLoading ? "btn saving" : "btn"}>
+        <button type="submit" className={isLoading ? 'btn saving' : 'btn'}>
           Sign Up
         </button>
-        {msg && <pre style={{ background: "salmon", padding: 10 }}>{msg}</pre>}
+        {msg && <pre style={{ background: 'salmon', padding: 10 }}>{msg}</pre>}
       </div>
     </form>
   )
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,19 +1,19 @@
-import React from "react"
+import React from 'react'
 import {
-  Dialog
+  Dialog,
   // DialogOverlay, DialogContent
-} from "@reach/dialog"
-import VisuallyHidden from "@reach/visually-hidden"
+} from '@reach/dialog'
+import VisuallyHidden from '@reach/visually-hidden'
 
-import { Widget } from "./app"
+import { Widget, AuthProps } from './app'
 
-import { ErrorBoundary } from "./errorBoundary"
+import { ErrorBoundary } from './errorBoundary'
 
 import {
   IdentityContextProvider as _IdentityContextProvider,
-  useIdentityContext as _useIdentityContext
-} from "react-netlify-identity"
-export { User, Settings, ReactNetlifyIdentityAPI, useNetlifyIdentity } from "react-netlify-identity"
+  useIdentityContext as _useIdentityContext,
+} from 'react-netlify-identity'
+export { User, Settings, ReactNetlifyIdentityAPI, useNetlifyIdentity } from 'react-netlify-identity'
 
 /** URL of your Netlify Instance with Identity enabled e.g. https://netlify-gotrue-in-react.netlify.com */
 
@@ -22,28 +22,28 @@ type ModalProps = {
   showDialog: boolean
   /** modal will call this function to set the state of showDialog to false */
   onCloseDialog: () => void
-}
+} & AuthProps
 
 export const IdentityContextProvider = _IdentityContextProvider
 export const useIdentityContext = _useIdentityContext
-export function IdentityModal({ showDialog, onCloseDialog }: ModalProps) {
+export function IdentityModal({ showDialog, onCloseDialog, ...authprops }: ModalProps) {
   return (
     <Dialog
       isOpen={showDialog}
       onDismiss={onCloseDialog}
       style={{
-        border: "solid 5px hsla(0, 0%, 0%, 0.5)",
-        borderRadius: "10px",
-        position: "relative",
-        maxWidth: 400
+        border: 'solid 5px hsla(0, 0%, 0%, 0.5)',
+        borderRadius: '10px',
+        position: 'relative',
+        maxWidth: 400,
       }}
     >
       <button className="btn btnClose" onClick={onCloseDialog}>
         <VisuallyHidden>Close</VisuallyHidden>
       </button>
       <ErrorBoundary>
         <React.Suspense fallback={<div>Loading...</div>}>
-          <Widget onCloseDialog={onCloseDialog} />
+          <Widget {...authprops} />
         </React.Suspense>
       </ErrorBoundary>
     </Dialog>
