title: React Hooks Problem: Unhandled Rejection (TypeError): Cannot read property 'signup' of undefined
body: <p>I'm trying to implement the useAuth hook from <a href="https://usehooks.com/" rel="nofollow noreferrer">https://usehooks.com/</a></p>
  
  <p>useAuth.js</p>
  
  <pre><code>// Hook (use-auth.js)
  
  import React, { useState, useEffect, useContext, createContext } from "react";
  import axios from 'axios';
  
  //Credentials
  
  
  const authContext = createContext();
  
  // Provider component that wraps your app and makes auth object ...
  // ... available to any child component that calls useAuth().
  export function ProvideAuth({ children }) {
    const auth = useProvideAuth();
    return &lt;authContext.Provider value={auth}&gt;{children}&lt;/authContext.Provider&gt;;
  }
  
  // Hook for child components to get the auth object ...
  // ... and re-render when it changes.
  export const useAuth = () =&gt; {
    return useContext(authContext);
  };
  
  // Provider hook that creates auth object and handles state
  function useProvideAuth() {
  
    const [user, setUser] = useState(null);
    const API_URL = "http://localhost:1038";
  
    // Wrap any Firebase methods we want to use making sure ...
    // ... to save the user to state.
    const signin = (email, password) =&gt; {
      return firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then(response =&gt; {
          setUser(response.user);
          return response.user;
        });
    };
  
    const register = (username, email, password) =&gt; {
      return firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then(response =&gt; {
          setUser(response.user);
          return response.user;
        });
    };
  
    const signup = async (data) =&gt; {
      const SIGNUP_ENDPOINT = `${API_URL}/wp-json/wp/v2/users/register`;
      let response = '';
      try {
          response = await axios({
              method: 'post',
              responseType: 'json',
              url: SIGNUP_ENDPOINT,
              data: data
            });
      } catch(e){
          console.log(e);
      }
      console.log(response);
    };
  
    const signout = () =&gt; {
      return firebase
        .auth()
        .signOut()
        .then(() =&gt; {
          setUser(false);
        });
    };
  
    const sendPasswordResetEmail = email =&gt; {
      return firebase
        .auth()
        .sendPasswordResetEmail(email)
        .then(() =&gt; {
          return true;
        });
    };
  
    const confirmPasswordReset = (code, password) =&gt; {
      return firebase
        .auth()
        .confirmPasswordReset(code, password)
        .then(() =&gt; {
          return true;
        });
    };
  
    // Return the user object and auth methods
    return {
      user,
      signin,
      signup,
      register,
      signout,
      sendPasswordResetEmail,
      confirmPasswordReset
    };
  }
  </code></pre>
  
  <p>Form register.js</p>
  
  <pre><code>import Link from 'next/link';
  import Layout from '../components/layout';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import { faEnvelope, faCheck, faLock, faUser } from '@fortawesome/free-solid-svg-icons'
  
  import useForm from 'react-hook-form'
  import { useAuth } from "../hooks/useAuth";
  
  
  export default function Register(props) {
  
      // Get auth state and re-render anytime it changes
      const auth = useAuth();
      const { register, handleSubmit, watch, errors } = useForm();
      const onSubmit = data =&gt; { auth.signup(data) }
  
      return (
          &lt;Layout&gt;
              &lt;div className="container mt-sm p-md"&gt;
                  &lt;div className="columns"&gt;
                      &lt;div className="column"&gt;
  
                      &lt;/div&gt;
                      &lt;div className="column"&gt;
                          &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
                          &lt;div className="field"&gt;
                          &lt;label className="label"&gt;Username&lt;/label&gt;
                          &lt;div className="control has-icons-left has-icons-right"&gt;
                              &lt;input className="input is-success" type="text" placeholder="Username" name="username" ref={register({ required: true })}/&gt;
                              &lt;span className="icon is-small is-left"&gt;
                              &lt;FontAwesomeIcon icon={faUser}/&gt;
                              &lt;/span&gt;
                              &lt;span className="icon is-small is-right"&gt;
                              &lt;FontAwesomeIcon icon={faCheck}/&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                          {errors.username &amp;&amp; &lt;p className="help is-danger"&gt;This username is invalid&lt;/p&gt;}
                          &lt;/div&gt;
  
                          &lt;div className="field"&gt;
                          &lt;label className="label"&gt;Email&lt;/label&gt;
                          &lt;div className="control has-icons-left has-icons-right"&gt;
                              &lt;input className="input is-success" type="text" placeholder="Email" name="email" ref={register({ required: true , pattern: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/})}/&gt;
                              &lt;span className="icon is-small is-left"&gt;
                              &lt;FontAwesomeIcon icon={faEnvelope}/&gt;
                              &lt;/span&gt;
                              &lt;span className="icon is-small is-right"&gt;
                              &lt;i className="fas fa-exclamation-triangle"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                          {errors.email &amp;&amp; &lt;p className="help is-danger"&gt;This email is invalid&lt;/p&gt;}
                          &lt;/div&gt;
                          &lt;div className="field"&gt;
                          &lt;label className="label"&gt;Password&lt;/label&gt;
                              &lt;div className="control has-icons-left"&gt;
                                  &lt;input className="input" type="password" placeholder="Password" name="password" ref={register({ required: true , pattern: /^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})/ })}/&gt;
                                  &lt;span className="icon is-small is-left"&gt;
                                  &lt;FontAwesomeIcon icon={faLock}/&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          {errors.password &amp;&amp; &lt;p className="help is-danger"&gt;This password is too weak&lt;/p&gt;}
                          &lt;div className="field"&gt;
                          &lt;label className="label"&gt;Confirm Password&lt;/label&gt;
                              &lt;div className="control has-icons-left"&gt;
                                  &lt;input className="input" type="password" placeholder="Confirm Password" name="confirm_password" ref={register({ required: true , validate: (value) =&gt; { return value === watch('password')} })}/&gt;
                                  &lt;span className="icon is-small is-left"&gt;
                                  &lt;FontAwesomeIcon icon={faLock}/&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          {errors.confirm_password &amp;&amp; &lt;p className="help is-danger"&gt;This password do not match&lt;/p&gt;}
                          &lt;div className="field"&gt;
                          &lt;div className="control"&gt;
                              &lt;label className="checkbox"&gt;
                              &lt;input type="checkbox" name="terms" ref={register({ required: true })}/&gt;
                              I agree to the &lt;Link href='/'&gt;&lt;a&gt;terms and conditions&lt;/a&gt;&lt;/Link&gt;
                              &lt;/label&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                          {errors.terms &amp;&amp; &lt;p className="help is-danger"&gt;You must agree to the terms and conditions&lt;/p&gt;}
  
                          &lt;div className="field is-grouped"&gt;
                          &lt;div className="control"&gt;
                              &lt;button className="button is-link"&gt;Submit&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;div className="control"&gt;
                              &lt;button className="button is-link is-light" type="submit"&gt;Cancel&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt; 
                      &lt;/div&gt;
                      &lt;div className="column"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/Layout&gt;
      )
  }
  </code></pre>
  
  <p>I'm getting the error when the form submits and I call the useAuth hook.</p>
  
  <pre><code>Unhandled Rejection (TypeError): Cannot read property 'signup' of undefined
  onSubmit
  ./pages/register.js:15
    12 | // Get auth state and re-render anytime it changes
    13 | const auth = useAuth();
    14 | const { register, handleSubmit, watch, errors } = useForm();
  &gt; 15 | const onSubmit = data =&gt; { auth.signup(data) }
       | ^  16 | 
    17 | return (
    18 |  &lt;Layout&gt;
  </code></pre>
  
  <p>Any ideas on where im going wrong. the hook was meant to be used with firebase but im modifying it for wordpress so only the signup function is set up right now.</p>
  
  <p>Layout.js</p>
  
  <pre><code>    import Head from 'next/head'
      import Link from 'next/link'
      import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
      import { faCoffee } from '@fortawesome/free-solid-svg-icons'
      import '../styles/styles.sass'
      import { ProvideAuth } from "../hooks/useAuth";
  
      export default ({ children }) =&gt; {
  
      const toggleStyles = (event) =&gt; {
      document.querySelector('#burger').classList.toggle('is-active')
      document.querySelector('#navbarmenu').classList.toggle('is-active')
       }
  
      return (
      &lt;ProvideAuth&gt;
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;Quiz Client&lt;/title&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, width=device- 
       width"/&gt;
        &lt;/Head&gt;
        &lt;header&gt;
          &lt;nav className="navbar is-primary" role="navigation" aria- 
           label="main navigation"&gt;
            &lt;div className="navbar-brand"&gt;
              &lt;a className="navbar-item"&gt;
                      &lt;FontAwesomeIcon icon={faCoffee} /&gt;
              &lt;/a&gt;
              &lt;a id="burger" onClick={toggleStyles} 
                  role="button" className="navbar-burger burger" aria- 
         label="menu" aria-expanded="false" data-target="navbarmenu"&gt;
                &lt;span aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span aria-hidden="true"&gt;&lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;div id="navbarmenu" className="navbar-menu"&gt;
              &lt;div className="navbar-start"&gt;
                &lt;Link prefetch href="/"&gt;
                  &lt;a className="navbar-item"&gt;Home&lt;/a&gt;
                &lt;/Link&gt;
                &lt;Link prefetch href="/elsewhere"&gt;
                  &lt;a className="navbar-item"&gt;Elsewhere&lt;/a&gt;
                &lt;/Link&gt;
              &lt;/div&gt;
  
              &lt;div className="navbar-end"&gt; 
                &lt;Link prefetch href="/login"&gt;
                  &lt;a className="navbar-item"&gt;Login&lt;/a&gt;
                &lt;/Link&gt;
                &lt;Link prefetch href="/register"&gt;
                  &lt;a className="navbar-item"&gt;Register&lt;/a&gt;
                &lt;/Link&gt;           
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/header&gt;
        {children}
        &lt;footer className="footer"&gt;
          &lt;div className="content has-text-centered"&gt;
            &lt;span&gt;I'm the footer&lt;/span&gt;
          &lt;/div&gt;
        &lt;/footer&gt;
        &lt;/div&gt;
        &lt;/ProvideAuth&gt;
        )
        }
  </code></pre>
  
  <p>Excuse the formatting</p>