add localhost warning to providers

Author: sw-yx

example/src/App.tsx

@@ -3,6 +3,8 @@ import "./App.css"
 import { IdentityModal, useNetlifyIdentity, IdentityContextProvider } from "react-netlify-identity-widget"
 import "react-netlify-identity-widget/styles.css"
 
+
+
 function App() {
   const [dialog, setDialog] = React.useState(false)
   const identity = useNetlifyIdentity("https://react-netlify-identity-widget.netlify.com")
@@ -24,21 +26,20 @@ function App() {
               >
                 LOG OUT
               </button>
-              <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
             </>
           ) : (
-            <>
-              <h1> hello! try logging in! </h1>
-              <button
-                className="btn"
-                style={{ maxWidth: 400, background: "darkgreen" }}
-                onClick={() => setDialog(true)}
-              >
-                LOG IN
+              <>
+                <h1> hello! try logging in! </h1>
+                <button
+                  className="btn"
+                  style={{ maxWidth: 400, background: "darkgreen" }}
+                  onClick={() => setDialog(true)}
+                >
+                  LOG IN
               </button>
-              <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
-            </>
-          )}
+              </>
+            )}
+          <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
           <h3>
             Or{" "}
             <a

src/components/providers.tsx

@@ -1,6 +1,19 @@
 import React from "react"
 import { useIdentityContext, SettingContext } from "../context"
 import { Settings } from "react-netlify-identity"
+
+
+
+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 Providers() {
   const setting = React.useContext(SettingContext)
   const hasProviders =
@@ -10,6 +23,7 @@ export function Providers() {
   if (!hasProviders) return null
   return (
     <div className="providersGroup">
+      {isLocalhost && <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" />