Firebase Authentication sample signin, signup and email verification. SignUp code is complicated and I want to refactor.

App.tsx

import React from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'
import { ThemeProvider } from '@material-ui/styles';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import theme from './Theme'
import { AuthProvider } from './Auth'
import SignUp from './SignUp'


const stripePromise = loadStripe("pk_test_long_alpha_numeric");

export default () => {
  return (
    <Router>
      <Switch>
        <ThemeProvider theme={theme}>
          <AuthProvider>
            <Elements stripe={stripePromise}>
              <Route exact path='/signup' component={SignUp} />
            </Elements>
          </AuthProvider>
        </ThemeProvider>
      </Switch>
    </Router>
  );
}

Auth.tsx

import { User } from "firebase";
import React, { createContext, useEffect, useState } from "react";

import {auth, db} from "./firebase";

interface IAuthContext {
  currentUser: User | null | undefined;
  userDoc: any;
}

const AuthContext = createContext<IAuthContext>({ currentUser: undefined, userDoc: undefined });

const AuthProvider = (props: any) => {
  const [currentUser, setCurrentUser] = useState<User | null | undefined>(undefined);
  const [userDoc, setUserDoc] = useState<any>({})  // TODO document type

  useEffect(() => {
    auth.onAuthStateChanged(user => {
      setCurrentUser(user);
    });
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser: currentUser, userDoc: userDoc }}>
      {props.children}
    </AuthContext.Provider>
  );
};

export { AuthContext, AuthProvider };

SignUp.tsx

import React, { useState, useEffect, useContext } from 'react'

export default () => {
  const { currentUser } = useContext(AuthContext)

  const handleSignUp = () => {
    firebase.auth().fetchSignInMethodsForEmail(email)
    .then(methods => {
      if (methods.length > 0) {
        console.log(methods)
        firebase.auth().signInWithEmailAndPassword(email, password)
        .then(credential => {
          if (credential.user?.emailVerified) {
            return
          } else {
            credential.user?.sendEmailVerification()
            .then(() => alert(currentUser?.email + ' will receive verification email. Open a link in it.'))
            .catch(() => alert('Something wrong. Try it later.'))
            return
          }
        })
        .catch(err => {
          alert('Email is already registered. Put correct password.')
        })
      } else {
        firebase.auth().createUserWithEmailAndPassword(email, password)
        .then((credential) => {
          credential.user?.sendEmailVerification()
          return credential
        })
        .then((credential) => {
          alert(credential.user?.email + ' will receive verification email. Open a link in it.')
          return credential
        })
        .then((credential) => {
          if (credential.user === null) {
            throw Error('user is null')  // error handle
          }
          const interval = setInterval(() => {
            credential?.user?.reload();
            console.log(credential.user)
            console.log(currentUser)
            if (credential?.user?.emailVerified) {
              clearInterval(interval)
              firebase.auth().signInWithEmailAndPassword(email, password)
            }
          }, 3000);
        })
        .catch(err => {
          console.log(err)
          if(err.code==="auth/email-already-in-use") {
            console.log(currentUser)
            if (currentUser && !currentUser.emailVerified) {
              currentUser.sendEmailVerification()
              .then(() => {
                alert(currentUser.email + ' will receive verification email again. Open a link in the latest email.')
              })
            } else {
              console.log('no current user')
            }
          } else if(err.code==="auth/too-many-requests") {
            alert('Too many requests received and account is now suspended. Try it later.')
          } else {
            alert('Something wrong. Try it later.')
          }
        })
      }
    })

  }
  return (
    <button onClick={handleSubmit} />
)
}