diff --git a/hub/site/src/components/login/auth-form.tsx b/hub/site/src/components/login/auth-form.tsx index 86109f7..0935136 100644 --- a/hub/site/src/components/login/auth-form.tsx +++ b/hub/site/src/components/login/auth-form.tsx @@ -14,7 +14,7 @@ import { DialogTitle, } from '@/components/ui/dialog' import { useState } from 'react' -import { AuthMethodsList } from 'pocketbase' +import { AuthMethodsList, OAuth2AuthConfig } from 'pocketbase' import { Link } from '../router' const honeypot = v.literal('') @@ -64,7 +64,7 @@ export function UserAuthForm({ authMethods: AuthMethodsList }) { const [isLoading, setIsLoading] = useState(false) - const [isGitHubLoading, setIsOauthLoading] = useState(false) + const [isOauthLoading, setIsOauthLoading] = useState(false) const [errors, setErrors] = useState>({}) async function handleSubmit(e: React.FormEvent) { @@ -145,7 +145,7 @@ export function UserAuthForm({ autoCapitalize="none" autoComplete="username" autoCorrect="off" - disabled={isLoading || isGitHubLoading} + disabled={isLoading || isOauthLoading} className="pl-9" /> {errors?.username && ( @@ -167,7 +167,7 @@ export function UserAuthForm({ autoCapitalize="none" autoComplete="email" autoCorrect="off" - disabled={isLoading || isGitHubLoading} + disabled={isLoading || isOauthLoading} className="pl-9" /> {errors?.email &&

{errors.email}

} @@ -184,7 +184,7 @@ export function UserAuthForm({ required type="password" autoComplete="current-password" - disabled={isLoading || isGitHubLoading} + disabled={isLoading || isOauthLoading} className="pl-9" /> {errors?.password &&

{errors.password}

} @@ -202,7 +202,7 @@ export function UserAuthForm({ required type="password" autoComplete="current-password" - disabled={isLoading || isGitHubLoading} + disabled={isLoading || isOauthLoading} className="pl-9" /> {errors?.passwordConfirm && ( @@ -246,20 +246,40 @@ export function UserAuthForm({ 'justify-self-center': !authMethods.emailPassword, 'px-5': !authMethods.emailPassword, })} - onClick={async () => { + onClick={() => { setIsOauthLoading(true) - try { - await pb.collection('users').authWithOAuth2({ provider: provider.name }) - $authenticated.set(pb.authStore.isValid) - } catch (e) { - showLoginFaliedToast() - } finally { - setIsOauthLoading(false) + const oAuthOpts: OAuth2AuthConfig = { + provider: provider.name, } + // https://github.com/pocketbase/pocketbase/discussions/2429#discussioncomment-5943061 + if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) { + const authWindow = window.open() + if (!authWindow) { + setIsOauthLoading(false) + toast({ + title: 'Error', + description: 'Please enable pop-ups for this site', + variant: 'destructive', + }) + return + } + oAuthOpts.urlCallback = (url) => { + authWindow.location.href = url + } + } + pb.collection('users') + .authWithOAuth2(oAuthOpts) + .then(() => { + $authenticated.set(pb.authStore.isValid) + }) + .catch(showLoginFaliedToast) + .finally(() => { + setIsOauthLoading(false) + }) }} - disabled={isLoading || isGitHubLoading} + disabled={isLoading || isOauthLoading} > - {isGitHubLoading ? ( + {isOauthLoading ? ( ) : (