Add onResendConfirmationClick function on the toast message

site/gatsby-site/cypress/e2e/integration/login.cy.js

@@ -84,4 +84,45 @@ describe('Login', () => {
     cy.contains('Forgot password?').click();
     cy.location('pathname').should('eq', '/forgotpassword/');
   });
+
+  it('Should give the option to resend Email verification if the user is not confirmed', () => {
+    cy.conditionalIntercept(
+      '**/login',
+      (req) => req.body.username == Cypress.env('e2eUsername'),
+      'Login',
+      {
+        statusCode: 401,
+        body: {
+          error: 'confirmation required',
+          error_code: 'AuthError',
+          link: 'https://realm.mongodb.com/groups/633205e6aecbcc4b2c2067c3/apps/633207f10d438f13ab3ab4d6/logs?co_id=6549772172bdb9e8eadeea95',
+        },
+      }
+    );
+
+    cy.conditionalIntercept(
+      '**/auth/providers/local-userpass/confirm/call',
+      (req) => req.body.email == Cypress.env('e2eUsername'),
+      'Confirmation',
+      {
+        statusCode: 204,
+      }
+    );
+
+    cy.visit(url);
+    cy.get('input[name=email]').type(Cypress.env('e2eUsername'));
+    cy.get('input[name=password]').type(Cypress.env('e2ePassword'));
+    cy.get('[data-cy="login-btn"]').click();
+
+    cy.wait('@Login');
+
+    cy.get('[data-cy="toast"]').contains('Resend Verification email').should('exist');
+    cy.get('[data-cy="toast"]').contains('Resend Verification email').click();
+
+    cy.wait('@Confirmation');
+
+    cy.get('[data-cy="toast"]')
+      .contains(`Verification email sent to ${Cypress.env('e2eUsername')}`)
+      .should('exist');
+  });
 });

site/gatsby-site/src/contexts/userContext/UserContextProvider.js

@@ -6,9 +6,10 @@ import { ApolloProvider, ApolloClient, HttpLink, InMemoryCache } from '@apollo/c
 import config from '../../../config';
 import fetch from 'cross-fetch';
 import useToastContext, { SEVERITY } from '../../hooks/useToast';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import { navigate } from 'gatsby';
 import useLocalizePath from '../../components/i18n/useLocalizePath';
+import CustomButton from '../../elements/Button';
 
 // https://github.com/mongodb-university/realm-graphql-apollo-react/blob/master/src/index.js
 
@@ -98,7 +99,19 @@ export const UserContextProvider = ({ children }) => {
 
       addToast({
         message: (
-          <label className="capitalize">{t(e.error || 'An unknown error has occurred')}</label>
+          <>
+            <label className="capitalize">{t(e.error || 'An unknown error has occurred')}</label>
+            {e.statusCode === 401 && e.error == 'confirmation required' && (
+              <CustomButton
+                variant="link"
+                title={t('Resend Verification email')}
+                onClick={() => onResendConfirmationClick(email)}
+                className="underline text-sm pl-0 border-0"
+              >
+                <Trans>Resend Verification email</Trans>
+              </CustomButton>
+            )}
+          </>
         ),
         severity: SEVERITY.danger,
         error: e,
@@ -107,6 +120,25 @@ export const UserContextProvider = ({ children }) => {
     }
   };
 
+  const onResendConfirmationClick = async (email) => {
+    try {
+      await realmApp.emailPasswordAuth.retryCustomConfirmation(email);
+
+      addToast({
+        message: `${t('Verification email sent to')} ${email}`,
+        severity: SEVERITY.success,
+      });
+    } catch (e) {
+      addToast({
+        message: (
+          <label className="capitalize">{t(e.error || 'An unknown error has occurred')}</label>
+        ),
+        severity: SEVERITY.danger,
+        error: e,
+      });
+    }
+  };
+
   const loginWithEmail = async ({ email, password, redirectTo }) => {
     return await login({ email, password, redirectTo });
   };