show errors on settings during auth linking

components/login.js

@@ -31,20 +31,24 @@ export function EmailLoginForm ({ text, callbackUrl }) {
   )
 }
 
-export default function Login ({ providers, callbackUrl, error, text, Header, Footer }) {
-  const errors = {
-    OAuthSignin: 'Error constructing OAuth URL. Try again or choose a different method.',
-    OAuthCallback: 'Error handling OAuth response. Try again or choose a different method.',
-    OAuthCreateAccount: 'Could not create OAuth account. Try again or choose a different method.',
-    EmailCreateAccount: 'Could not create Email account. Try again or choose a different method.',
-    Callback: 'Error in callback handler. Try again or choose a different method.',
-    OAuthAccountNotLinked: 'This auth method is linked to another account. To link to this account first unlink the other account.',
-    EmailSignin: 'Failed to send email. Make sure you entered your email address correctly.',
-    CredentialsSignin: 'Auth failed. Try again or choose a different method.',
-    default: 'Auth failed. Try again or choose a different method.'
-  }
+const authErrorMessages = {
+  OAuthSignin: 'Error constructing OAuth URL. Try again or choose a different method.',
+  OAuthCallback: 'Error handling OAuth response. Try again or choose a different method.',
+  OAuthCreateAccount: 'Could not create OAuth account. Try again or choose a different method.',
+  EmailCreateAccount: 'Could not create Email account. Try again or choose a different method.',
+  Callback: 'Error in callback handler. Try again or choose a different method.',
+  OAuthAccountNotLinked: 'This auth method is linked to another account. To link to this account first unlink the other account.',
+  EmailSignin: 'Failed to send email. Make sure you entered your email address correctly.',
+  CredentialsSignin: 'Auth failed. Try again or choose a different method.',
+  default: 'Auth failed. Try again or choose a different method.'
+}
 
-  const [errorMessage, setErrorMessage] = useState(error && (errors[error] ?? errors.default))
+export function authErrorMessage(error) {
+  return error && (authErrorMessages[error] ?? authErrorMessages.default)
+}
+
+export default function Login ({ providers, callbackUrl, error, text, Header, Footer }) {
+  const [errorMessage, setErrorMessage] = useState(authErrorMessage(error))
   const router = useRouter()
 
   if (router.query.type === 'lightning') {

pages/login.js

@@ -23,6 +23,14 @@ export async function getServerSideProps ({ req, res, query: { callbackUrl, erro
   }
 
   if (session && callbackUrl) {
+    // in the cause of auth linking we want to pass the error back to
+    // settings
+    if (error) {
+      const url = new URL(callbackUrl, process.env.PUBLIC_URL)
+      url.searchParams.set('error', error)
+      callbackUrl = url.pathname + url.search
+    }
+
     return {
       redirect: {
         destination: callbackUrl,

pages/settings.js

@@ -20,6 +20,7 @@ import { emailSchema, lastAuthRemovalSchema, settingsSchema } from '../lib/valid
 import { SUPPORTED_CURRENCIES } from '../lib/currency'
 import PageLoading from '../components/page-loading'
 import { useShowModal } from '../components/modal'
+import { authErrorMessage } from '../components/login'
 
 export const getServerSideProps = getGetServerSideProps(SETTINGS)
 
@@ -330,6 +331,8 @@ function UnlinkObstacle ({ onClose, type, unlinkAuth }) {
 
 function AuthMethods ({ methods }) {
   const showModal = useShowModal()
+  const router = useRouter()
+  const [err, setErr] = useState(authErrorMessage(router.query.error))
   const [unlinkAuth] = useMutation(
     gql`
       mutation unlinkAuth($authType: String!) {
@@ -369,6 +372,15 @@ function AuthMethods ({ methods }) {
   return (
     <>
       <div className='form-label mt-3'>auth methods</div>
+      {err && <Alert variant='danger' onClose={() => {
+        const { pathname, query: { error, nodata, ...rest } } = router
+        router.replace({
+          pathname,
+          query: { nodata, ...rest }
+        }, { pathname, query: { ...rest } }, { shallow: true })
+        setErr(undefined)
+      }} dismissible>{err}</Alert>}
+
       {providers?.map(provider => {
         if (provider === 'email') {
           return methods.email