social-providers-fix

src/components/Nav/AuthModal/SocialProviders.tsx

@@ -1,43 +1,33 @@
 import { useLocalize } from '../../../context/localize'
-import { hideModal } from '../../../stores/ui'
+import { useSession } from '../../../context/session'
 import { Icon } from '../../_shared/Icon'
 
 import styles from './SocialProviders.module.scss'
 
-type Provider = 'facebook' | 'google' | 'vk' | 'github'
+type Provider = 'facebook' | 'google' | 'github' // 'vk' | 'telegram'
-
-// 3rd party provider auth handler
-const handleSocialAuthLinkClick = (event: MouseEvent, provider: Provider): void => {
-  event.preventDefault()
-  const popup = window.open(
-    `https://auth.discours.io/oauth_login/${provider}`,
-    provider,
-    'width=740, height=420',
-  ) // TODO: precalculate window size
-  popup?.focus()
-  hideModal()
-}
 
 export const SocialProviders = () => {
   const { t } = useLocalize()
+  const {
+    actions: { oauthLogin },
+  } = useSession()
+
+  const handleClick = async (event: MouseEvent | TouchEvent, provider: Provider): Promise<void> => {
+    event.preventDefault()
+    await oauthLogin(provider)
+  }
+
   return (
-    <div class={styles.container}>
+    <div className={styles.container}>
-      <div class={styles.text}>{t('or sign in with social networks')}</div>
+      <div className={styles.text}>{t('or sign in with social networks')}</div>
-      <div class={styles.social}>
+      <div className={styles.social}>
-        <a href="#" onClick={(event) => handleSocialAuthLinkClick(event, 'facebook')}>
+        <a href="#" onClick={(ev) => handleClick(ev, 'google')}>
-          <Icon name="facebook" />
+          <Icon name={'google'} />
         </a>
-        <a href="#" onClick={(event) => handleSocialAuthLinkClick(event, 'google')}>
+        <a href="#" onClick={(ev) => handleClick(ev, 'facebook')}>
-          <Icon name="google" />
+          <Icon name={'facebook'} />
         </a>
-        <a href="#" onClick={(event) => handleSocialAuthLinkClick(event, 'vk')}>
+        <a href="#" class={styles.githubAuth} onClick={(ev) => handleClick(ev, 'github')}>
-          <Icon name="vk" />
-        </a>
-        <a
-          href="#"
-          class={styles.githubAuth}
-          onClick={(event) => handleSocialAuthLinkClick(event, 'github')}
-        >
           <Icon name="github" />
         </a>
       </div>

src/context/session.tsx

@@ -9,6 +9,7 @@ import {
   Authorizer,
   ConfigType,
   SignupInput,
+  AuthorizeResponse,
 } from '@authorizerdev/authorizer-js'
 import {
   createContext,
@@ -34,8 +35,8 @@ import { useSnackbar } from './snackbar'
 
 const defaultConfig: ConfigType = {
   authorizerURL: 'https://auth.discours.io',
-  redirectURL: 'https://discoursio-webapp.vercel.app',
+  redirectURL: 'https://testing.discours.io',
-  clientID: '9c113377-5eea-4c89-98e1-69302462fc08', // FIXME: use env?
+  clientID: 'b9038a34-ca59-41ae-a105-c7fbea603e24', // FIXME: use env?
 }
 
 export type SessionContextType = {
@@ -60,6 +61,7 @@ export type SessionContextType = {
     signUp: (params: SignupInput) => Promise<AuthToken | void>
     signIn: (params: LoginInput) => Promise<void>
     signOut: () => Promise<void>
+    oauthLogin: (provider: string) => Promise<void>
     changePassword: (password: string, token: string) => void
     confirmEmail: (input: VerifyEmailInput) => Promise<AuthToken | void> // email confirm callback is in auth.discours.io
     setIsSessionLoaded: (loaded: boolean) => void
@@ -281,6 +283,20 @@ export const SessionProvider = (props: {
     }
   }
 
+  const oauthLogin = async (oauthProvider: string) => {
+    console.debug(`[context.session] calling authorizer's oauth for`)
+    try {
+      const ar: AuthorizeResponse | void = await authorizer().oauthLogin(
+        oauthProvider,
+        [],
+        window.location.origin,
+      )
+      console.debug(ar)
+    } catch (error) {
+      console.warn(error)
+    }
+  }
+
   const isAuthenticated = createMemo(() => Boolean(author()))
   const actions = {
     loadSession,
@@ -296,6 +312,7 @@ export const SessionProvider = (props: {
     authorizer,
     loadAuthor,
     changePassword,
+    oauthLogin,
   }
   const value: SessionContextType = {
     authError,