React & Moralis - Authentication, Sign Up and Login [Part 2] Errors

Moralis General
#1

Tutorial Part 2
I am currently implementing the authentication error alert

Here is the error.

1911×888

Here is my code for app.js

import {useMoralis} from "react-moralis";
import {
    Alert,
    AlertDescription,
    AlertIcon,
    AlertTitle,
    Box,
    Button,
    CloseButton,
    Container,
    Heading
} from "@chakra-ui/react";


function App() {
    const {authenticate, isAuthenticated, isAuthenticating, authError, logout} = useMoralis();

    if(isAuthenticated){
        return (
            <Container>
               <Heading>Welcome to HexAbout</Heading>
                <Button onClick={() => logout()}>Logout</Button>
            </Container>
        )
    }

  return (
    <div>
      HexAbout
        {authError && (
            <Alert status="failed">
                <AlertIcon />
                <Box flex="1">
                    <AlertTitle>Authentication Failed</AlertTitle>
                    <AlertDescription display="block">
                        {authError.message}
                    </AlertDescription>
                </Box>
                <CloseButton position="absolute" right="8px" top="8px" />
            </Alert>
        )}
        <Button onClick={() => authenticate()} isLoading={isAuthenticating}>Authenticate</Button>
    </div>
  );
}

export default App;

My theory is that it has to do with deleting the .css file in the beginning of the series correct? Shouldn’t Chakra-UI Override in built the react color settings? Is it something else?

#2

Hi @IntrepidShape,

Could you verify what tutorial you’re following to write this code? We have a lot of tutorials in place so it’s hard to know.

Also, is app.js the only file that you’ve written on your own? Are there any imports that you’ve done in other files that are not available above?

Looking forward to the response.

#3

No worries!

I’ll update the title for the sake of clarity.

This bad boy.

React & Moralis - Authentication, Sign Up and Login [Part 2]

I understand it is unfinished and may not be finished. But I just wanted to get react up and running for moralis and I’ll continue on doing my own thing.

#4 
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {ChakraProvider, extendTheme} from "@chakra-ui/react";
import { MoralisProvider } from "react-moralis";

const appId = "";
const serverUrl = "";

const theme = extendTheme({
    config: {
        initialColorMode: "dark",
    },
});


ReactDOM.render(
  <MoralisProvider appId={appId} serverUrl={serverUrl}>
      <ChakraProvider theme={theme}>
          <App />
      </ChakraProvider>
  </MoralisProvider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

this is the other .JS file in the video This is index.js

#5

Hi,

I just ran the code and it worked properly. I’m not sure why you’re facing this issue.

I was able to authenticate it successfully. :thinking:

image
image2520×768 20.5 KB

#6

I wasn’t clear. What I’m trying to implement is an error message upon the user having an error during authentication, which can be replicated. via hitting “Cancel” in meta mask when authenticating Metamask.

Which is this code here that I have pulled out of the App.js to display

{authError && (
            <Alert status="failed">
                <AlertIcon />
                <Box flex="1">
                    <AlertTitle>Authentication Failed</AlertTitle>
                    <AlertDescription display="block">
                        {authError.message}
                    </AlertDescription>
                </Box>
                <CloseButton position="absolute" right="8px" top="8px" />
            </Alert>
        )}
1 Like
#7

Hey,

This looks like a simple issue.

The Alert component does not accept “failed” input in the status prop.
Check this out –

This code will solve the issue –

<Alert status="error">
                <AlertIcon />
                <Box flex="1">
                    <AlertTitle>Authentication Failed</AlertTitle>
                    <AlertDescription display="block">
                        {authError.message}
                    </AlertDescription>
                </Box>
                <CloseButton position="absolute" right="8px" top="8px" />
            </Alert>

Hope this helps.

Happy BUILDing! :man_mechanic:

1 Like