tryloginprovider

Author: sw-yx

example/src/App.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Router, Link, navigate } from "@reach/router"
 import "./App.css"
-import { useNetlifyIdentity } from "react-netlify-identity"
+import { useNetlifyIdentity, Settings } from "react-netlify-identity"
 import useLoading from "./useLoading"
 
 let IdentityContext = React.createContext<ReturnType<typeof useNetlifyIdentity>>(undefined!)
@@ -20,13 +20,14 @@ function PrivateRoute(props: React.PropsWithoutRef<MaybePathProps & { as: React.
 }
 
 function Login({  }: MaybePathProps) {
-  const { loginUser, signupUser, settings } = React.useContext(IdentityContext)
+  const { loginUser, signupUser, settings, loginProvider } = React.useContext(IdentityContext)
   const formRef = React.useRef<HTMLFormElement>(null!)
   const [msg, setMsg] = React.useState("")
   const [isLoading, load] = useLoading()
+  const [setting, setSetting] = React.useState<Settings | null>(null)
   React.useEffect(() => {
-    settings().then((...args) => console.log({ args }))
-  }, [settings])
+    settings().then(x => setSetting(x))
+  }, [])
   const signup = () => {
     const email = formRef.current.email.value
     const password = formRef.current.password.value
@@ -73,6 +74,8 @@ function Login({  }: MaybePathProps) {
           {msg && <pre>{msg}</pre>}
         </div>
       )}
+      {setting && <pre>{JSON.stringify(setting, null, 2)}</pre>}
+      {setting && setting.external.github && <div onClick={() => loginProvider("github")}>GitHub</div>}
     </form>
   )
 }

src/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import GoTrue, { User } from "gotrue-js"
+import GoTrue, { User, Settings } from "gotrue-js"
 
 type authChangeParam = (user?: User) => string | void
 
@@ -10,6 +10,7 @@ interface NIProps {
   onAuthChange?: authChangeParam
 }
 
+export type Settings = Settings
 export type User = User
 export default function NetlifyIdentity({ children, domain, onAuthChange }: NIProps) {
   return children(useNetlifyIdentity(domain, onAuthChange))
@@ -34,10 +35,15 @@ export function useNetlifyIdentity(domain: string, onAuthChange: authChangeParam
   }
 
   /******* external oauth */
-  const loginExternalUrl = (provider: string) => goTrueInstance.loginExternalUrl(provider)
-  const acceptInviteExternalUrl = (provider: string, token: string) =>
+  type Provider = "bitbucket" | "facebook" | "github" | "gitlab" | "google"
+
+  const loginProvider = (provider: Provider) => {
+    const url = goTrueInstance.loginExternalUrl(provider)
+    if (window) window.location.href = url
+  }
+  const acceptInviteExternalUrl = (provider: Provider, token: string) =>
     goTrueInstance.acceptInviteExternalUrl(provider, token)
-  const settings = goTrueInstance.settings.bind(goTrueInstance)
+  const settings: () => Promise<Settings> = goTrueInstance.settings.bind(goTrueInstance)
 
   /******* OPERATIONS */
   // make sure the Registration preferences under Identity settings in your Netlify dashboard are set to Open.
@@ -121,7 +127,7 @@ export function useNetlifyIdentity(domain: string, onAuthChange: authChangeParam
     authedFetch,
     _goTrueInstance: goTrueInstance,
     _domain: domain,
-    loginExternalUrl,
+    loginProvider,
     acceptInviteExternalUrl,
     settings
   }