Nothing happens when Authenticator UI v2 login buttons clicked

[coreyculler]

On which framework/platform are you having an issue? React

Which UI component? Authenticator

How is your app built? React/Gatsby

Please describe your bug. The Authenticator widget renders but whenever you try to login or sign up nothing happens. In Chrome devtools, no requests are happening whenever the button is clicked, so it's not reaching out to Cognito.

After downgrading to the v1 authenticator component, the login works as expected.

The code for the component is this:

import React from "react";
import Layout from "@layout";
import SEO from "@components/seo";
import PropTypes from "prop-types";
import { graphql } from "gatsby";
import { normalizedData } from "@utils/functions";
import { StaticImage } from "gatsby-plugin-image";
import Button from "../components/shared/button";
import { Amplify, Auth } from 'aws-amplify';
import { Authenticator } from '@aws-amplify/ui-react';
import awsExports from '../aws-exports';
Amplify.configure(awsExports);
const LoginPage = ({ data }) => {
    const globalContent = normalizedData(data?.allGeneral?.nodes || []);
    return (
        <Layout
            data={{
                ...globalContent["menu"],
                ...globalContent["footer"],
            }}
        >
            <SEO title="Authentication" pathname="/auth" />
            <div className="pt-260 pb-60">
                <div className="container text-center">
                    <div className="mb-16">
                                            <Authenticator>
                                            {({ signOut, user }) => (
                                                <main>
                                                    <h1>Hello {user.username}</h1>
                                                    <button onClick={signOut}>Sign out</button>
                                                </main>
                                            )}
                                        </Authenticator>
                    </div>
                </div>
            </div>
        </Layout>
    );
};

LoginPage.propTypes = {
    data: PropTypes.shape({
        allGeneral: PropTypes.shape({
            nodes: PropTypes.arrayOf(PropTypes.shape({})),
        }),
    }),
};
export const query = graphql`
    query LoginPageQuery {
        allGeneral {
            nodes {
                section
                id
                menu {
                    ...Menu
                }
                footer {
                    ...Footer
                }
            }
        }
    }
`;
export default LoginPage;

[ErikCH]

Hello @coreyculler

I created a Gatsby app with our Authenticator, and built it, and everything was working fine. So I'm not sure where the problem is here.

I looked at the demo app, and I see it's not giving any errors.

Could you double check the aws-exports file? Maybe that's not working correctly? If you change it to Amplify.configure({}) what happens?

Here is my Gatsby starter app I created that works with aws-amplify.

https://github.com/ErikCH/GatsbyAWSAmplifyDemo

[coreyculler]

The exports file was good and worked with the other libraries and utilities, but using Amplify.configure({}) did nothing. For now, I'm going to run with the v1 components since they work. I'm new to React and Gatsby, so it's certainly possible I'm doing something wrong or there's an issue with my dependencies. I've used the Amplify UI components for Vue a lot and I've never had any issues with those so this seems to be specific to the React v2 components.

[ErikCH]

@coreyculler ! That works, but if you have time, double check my starter app I uploaded. Is there something different between that app and yours?

[coreyculler]

I'll have to give it a deeper look - I looked at the main component and I didn't see anything that stuck out as different but I'll have to check your versions and stuff too.

[ErikCH]

I can't reproduce this, closing this for now. If this occurs again please add a link to repo where this can be reproduced.

[srianbury]

Looks like the same issue here #1226

[roNn23]

I think this is still a bug. I've got it to work in gatsby with the following hint: https://github.com/aws-amplify/amplify-ui/issues/2598#issuecomment-1249822959