update api after r-n-i api change

Author: sw-yx

README.md

@@ -29,7 +29,7 @@ const IdentityModal = React.lazy(() => import("react-netlify-identity-widget"))
 
 function App() {
   const [dialog, setDialog] = React.useState(false)
-  const identity = useNetlifyIdentity("https://netlify-gotrue-in-react.netlify.com")
+  const url = process.env.REACT_APP_NETLIFY_URL // supply the url of your Netlify site instance. VERY IMPORTANT
   const name =
     (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.name) || "NoName"
   return (

package.json

@@ -37,7 +37,7 @@
     "react-dom": "^15.0.0 || ^16.0.0"
   },
   "dependencies": {
-    "react-netlify-identity": "^0.0.16"
+    "react-netlify-identity": "^0.1.2"
   },
   "config": {
     "commitizen": {

src/app.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { Login } from "./components/login"
 import { Logout } from "./components/logout"
 import { Signup } from "./components/signup"
-import { useIdentityContext } from "./context"
+import { useIdentityCtx } from "react-netlify-identity"
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs"
 
 import { Providers } from "./components/providers"
@@ -33,8 +33,8 @@ function LoggedInScreen() {
   return <Logout />
 }
 
-function Gate({ }: { onCloseDialog: Function }) {
-  const identity = useIdentityContext()
+function Gate({  }: { onCloseDialog: Function }) {
+  const identity = useIdentityCtx()
   const isLoggedIn = Boolean(identity && identity.user)
   return isLoggedIn ? <LoggedInScreen /> : <LoggedOutScreen />
 }

src/components/login.tsx

@@ -1,10 +1,10 @@
 import React from "react"
-import { useIdentityContext } from "../context"
+import { useIdentityCtx } from "react-netlify-identity"
 import useLoading from "../useLoading"
 import VisuallyHidden from "@reach/visually-hidden"
 
 export function Login() {
-  const { loginUser } = useIdentityContext()
+  const { loginUser } = useIdentityCtx()
   const formRef = React.useRef<HTMLFormElement>(null)
   const [msg, setMsg] = React.useState("")
   const [isLoading, load] = useLoading()
@@ -30,11 +30,11 @@ export function Login() {
         const email = target.email.value
         const password = target.password.value
         load(loginUser(email, password, true))
-          .then(user => {
+          .then((user) => {
             console.log("Success! Logged in", user)
             // navigate("/dashboard")
           })
-          .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">

src/components/logout.tsx

@@ -1,12 +1,12 @@
 import React from "react"
-import { useIdentityContext } from "../context"
+import { useIdentityCtx } from "react-netlify-identity"
 import useLoading from "../useLoading"
 
 export function Logout() {
-  const identity = useIdentityContext()
+  const identity = useIdentityCtx()
   const name =
     (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.full_name) || "NoName"
-  
+
   const [isLoading, load] = useLoading()
   const logout = () => load(identity.logoutUser())
   return (

src/components/providers.tsx

@@ -1,13 +1,11 @@
 import React from "react"
-import { useIdentityContext, SettingContext } from "../context"
-import { Settings } from "react-netlify-identity"
+import { Settings, useIdentityCtx } from "react-netlify-identity"
 
 export function Providers() {
-  const setting = React.useContext(SettingContext)
-  const hasProviders =
-    setting &&
-    setting.external &&
-    Object.entries(setting.external).some(([k, v]) => ["github", "gitlab", "bitbucket", "google"].includes(k) && v)
+  const { settings } = useIdentityCtx()
+  const hasProviders = Object.entries(settings.external).some(
+    ([k, v]) => ["github", "gitlab", "bitbucket", "google"].includes(k) && v
+  )
   if (!hasProviders) return null
   let isLocalhost = false
   if (typeof window !== "undefined") {
@@ -25,22 +23,21 @@ export function Providers() {
         <pre>⚠️Testing providers on localhost won't work because OAuth redirects to your production site</pre>
       )}
       <hr className="hr" />
-      <ProviderButton setting={setting} provider="Google" />
-      <ProviderButton setting={setting} provider="GitHub" />
-      <ProviderButton setting={setting} provider="GitLab" />
-      <ProviderButton setting={setting} provider="Bitbucket" />
+      <ProviderButton settings={settings} provider="Google" />
+      <ProviderButton settings={settings} provider="GitHub" />
+      <ProviderButton settings={settings} provider="GitLab" />
+      <ProviderButton settings={settings} provider="Bitbucket" />
     </div>
   )
 }
 
 interface Dict<T> {
   [id: string]: T
 }
-function ProviderButton({ setting, provider }: { setting: Settings | null; provider: string }) {
-  if (!setting) return null
-  const ext = setting.external as Dict<{}>
+function ProviderButton({ settings, provider }: { settings: Settings; provider: string }) {
+  const ext = settings.external as Dict<{}>
   if (!ext[provider.toLowerCase()]) return null
-  const { loginProvider } = useIdentityContext()
+  const { loginProvider } = useIdentityCtx()
   const click = () => loginProvider(provider.toLowerCase() as "github" | "gitlab" | "bitbucket" | "google")
   return (
     <button onClick={click} className={`provider${provider} btn btnProvider`}>

src/components/signup.tsx

@@ -1,10 +1,10 @@
 import React from "react"
-import { useIdentityContext } from "../context"
+import { useIdentityCtx } from "react-netlify-identity"
 import useLoading from "../useLoading"
 import VisuallyHidden from "@reach/visually-hidden"
 
 export function Signup() {
-  const { signupUser } = useIdentityContext()
+  const { signupUser } = useIdentityCtx()
   const formRef = React.useRef<HTMLFormElement>(null)
   const [msg, setMsg] = React.useState("")
   const [isLoading, load] = useLoading()
@@ -15,11 +15,11 @@ export function Signup() {
     const password = formRef.current.password.value
     const data = { signupSource: "react-netlify-identity-widget", full_name }
     load(signupUser(email, password, data))
-      .then(user => {
+      .then((user) => {
         console.log("Success! Signed up", user)
         // navigate("/dashboard")
       })
-      .catch(err => void console.error(err) || setMsg("Error: " + err.message))
+      .catch((err) => void console.error(err) || setMsg("Error: " + err.message))
   }
   return (
     <form

src/context.tsx

@@ -7,10 +7,13 @@ import VisuallyHidden from "@reach/visually-hidden"
 
 import { Widget } from "./app"
 
-import { FormStateContextProvider, SettingContext } from "./context"
 import { ErrorBoundary } from "./errorBoundary"
 
-import { Settings, useNetlifyIdentity as _useNetlifyIdentity } from "react-netlify-identity"
+import {
+  IdentityContextProvider as _IdentityContextProvider,
+  useIdentityCtx as _useIdentityCtx
+} 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 */
 
@@ -21,46 +24,29 @@ type ModalProps = {
   onCloseDialog: () => void
 }
 
-import {
-  IdentityContextProvider as _IdentityContextProvider,
-  useIdentityContext as _useIdentityContext,
-  IdentityContext as _IdentityContext
-} from "./context"
-
 export const IdentityContextProvider = _IdentityContextProvider
-export const useNetlifyIdentity = _useNetlifyIdentity
-export const IdentityContext = _IdentityContext
-export const useIdentityContext = _useIdentityContext
+export const useIdentityContext = _useIdentityCtx
 export function IdentityModal({ showDialog, onCloseDialog }: ModalProps) {
-  const { settings } = useIdentityContext()
-  const [setting, setSetting] = React.useState<Settings | null>(null)
-  React.useEffect(() => {
-    settings().then(x => setSetting(x))
-  }, [settings])
   return (
-    <SettingContext.Provider value={setting}>
-      <Dialog
-        isOpen={showDialog}
-        onDismiss={() => void console.log("hi") || onCloseDialog()}
-        style={{
-          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>
-        <FormStateContextProvider>
-          <ErrorBoundary>
-            <React.Suspense fallback={<div>Loading...</div>}>
-              <Widget onCloseDialog={onCloseDialog} />
-            </React.Suspense>
-          </ErrorBoundary>
-        </FormStateContextProvider>
-      </Dialog>
-    </SettingContext.Provider>
+    <Dialog
+      isOpen={showDialog}
+      onDismiss={onCloseDialog}
+      style={{
+        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} />
+        </React.Suspense>
+      </ErrorBoundary>
+    </Dialog>
   )
 }
-export default IdentityModal
+export default IdentityModal