Diving into react-moralis and love it! So I could make the user login work and now wonder if someone has made custom hooks for other moralis functions such as resetpassword? Can someone maybe provide an example of how to use other moralis functions with react that do not come with a custom hook? Or maybe even show how to make own custom hooks?
Here is my attempt on getting the resetPasswordRequest working in React. I am quite new to all of this, so would be very thankful for some input from you guys.
ResetPasswordComponent
import React, { useState } from "react";
import { Button, Stack, Input } from "@chakra-ui/react";
import { Moralis } from "moralis";
const ResetPassword = () => {
const [email, setEmail] = useState();
return (
<Stack spacing={3}>
<Input
placeholder="E-Mail"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<Button
onClick={() => {
Moralis.User.requestPasswordReset(email)
.then(() => {
alert("Password request successfull, please check your Email!");
})
.catch((error) => {
alert("Error:" + error.code + " " + error.message);
});
}}
>
Request Password Reset
</Button>
</Stack>
);
};
export default ResetPassword;
It seems to call the correct function, but I get this error:
Error:1 An appName, publicServerURL, and emailAdapter are required for password reset and email verification functionality.
Where can I set all this?
Well, there is no custom hook for that yet. If you could create one, please do contribute to the react-moralis repo. We are using typescript to define our hooks so please make sure to define them in it if you do.
Did you initialise your moralis provider on the app ?
Like this? –
<MoralisProvider appId="xxxxxxxx" serverUrl="xxxxxxxx">
<App />
</MoralisProvider>,
1 Like
Yes:
import React from "react";
import ReactDOM from "react-dom";
import { MoralisProvider } from "react-moralis";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import App from "./App";
const theme = extendTheme({
config: {
initialColorMode: "dark",
},
});
const appId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
const serverUrl = "https://XXXXXXX.moralis.io:2053/server";
ReactDOM.render(
<React.StrictMode>
<MoralisProvider appId={appId} serverUrl={serverUrl}>
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
</MoralisProvider>
</React.StrictMode>,
document.getElementById("root")
);
Ah I see, since you are not using the inbuilt hook to call Moralis.User.requestPasswordReset , it is not able to retrieve the initialised values. I will get back to you with the right implementation for non hook functions.
Do give me some time.
1 Like
@malik I ran right into that too. The problem seems to be the React version of import { useMoralis } from "react-moralis"; and the const { user } = useMoralis() it provides does not have a static requestPasswordReset(email) function to match the non-ReactJS documentation.
I’m new to all this ReactJS circus so my jargon’s a bit weak. But might I suggest that due to the transitory nature of user an independent ‘hook’(?) would be better: const {requestPasswordReset } = useMoralis(). Because when we need it we obviously don’t have a user yet.
And I’m guessing at this point I’m not saying anything y’all haven’t figured out long ago. I’m catching up. Give me a minute. I’m just posting this here so I get pinged when the new requestPasswordReset uh…‘hook’ is announced. Y’all are awesome, keep up the good work!
1 Like
Any news regarding the correct syntax for calling password reset in react? @malik
I am getting this error: Error:1 An appName, publicServerURL, and emailAdapter are required for password reset and email verification functionality. See my code here:
PasswordResetComponent
import React, { useState } from "react";
import { Button, Stack, Input } from "@chakra-ui/react";
import { Moralis } from "moralis";
const ResetPassword = () => {
const [email, setEmail] = useState();
return (
<Stack spacing={3}>
<Input
isRequired
placeholder="E-Mail"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<Button
onClick={() => {
Moralis.User.requestPasswordReset(email)
.then(() => {
alert("Password request successfull, please check your Email!");
})
.catch((error) => {
alert("Error:" + error.code + " " + error.message);
});
}}
>
Request Password Reset
</Button>
</Stack>
);
};
export default ResetPassword;
Hi @Thomas,
Please try this way –
import React, { useState } from "react";
import { Button, Stack, Input } from "@chakra-ui/react";
import { useMoralis } from 'react-moralis';
const ResetPassword = () => {
const [email, setEmail] = useState();
const { Moralis } = useMoralis();
return (
<Stack spacing={3}>
<Input
isRequired
placeholder="E-Mail"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<Button
onClick={() => {
Moralis.user.requestPasswordReset(email)
.then(() => {
alert("Password request successfull, please check your Email!");
})
.catch((error) => {
alert("Error:" + error.code + " " + error.message);
});
}}
>
Request Password Reset
</Button>
</Stack>
);
};
export default ResetPassword;
We are using the hook to import the global Moralis Object.
Let me know if this works
Thanks.
1 Like
Unfortunately, I’m also getting a similar error. Will check with the core team.
1 Like
This is indeed an error from our system and the core devs are working to solve this. Mostly by next week it should be solved. 
Thank you for pointing these issues out. Truly helps us in maintaining a world class product.
Cheers. 
1 Like
Have they solve this issue yet?
1 Like
Haven’t heard anything yet. Hope it is coming soon.
I’m getting the same error, but using await Moralis.User.requestEmailVerification();
1 Like
@malik do you maybe have any insight in when this will be fixed, or is there a “hack”? It would be so awesome to have this available with react as well. Considering using this for production 
I have the same problem with 0.0.30
@malik, @ivan, Wanted to check in with you guys to see if this is going to be added soon? or is there a workaround?
Will check with the team right away!
Two points that I Noted –
- No email is being sent to the email address provided.
- The send grid api authentication is done correctly on the Email configuration tab.
And other details that I’m missing out?
The error message I posted above may be of interest. But yes, that is it. Thank you