AWS amplify customized Greetings

Question

I have created a wrapper that surrounds Route objects(react-router-dom) with the Amplify withAuthenticator HoC so I can get sure they are only available to logged in users and show the Amplify Login screen instead for those not logged in. This works perfect and after login I can see that the whole pages are having the Greetings bar on top(the white bar that says "Hello X" with an orange logout button right to it). I want to modify this button not just in style(I prefer the button green), but additionally I would love to add some menu buttons on the left side to use it for navigation.

Unfortunately no matter what I try either I create another bar that is below the Greetings or the Greetings just disappear. I have tried this:

import React from 'react';
import { ConfirmSignIn, ConfirmSignUp, ForgotPassword, RequireNewPassword, SignIn, SignUp, VerifyContact, withAuthenticator, Greetings } from 'aws-amplify-react';
import AuthGreeting from './views/AuthGreeting'

export const AuthRouter = props => (
    <div>
        {props.children}
    </div>
)

export default withAuthenticator(AuthRouter, false,[
    <AuthGreeting override='Greetings'/>,
    <ConfirmSignIn/>,
    <VerifyContact/>,
    <SignUp/>,
    <ConfirmSignUp/>,
    <ForgotPassword/>,
    <RequireNewPassword />
]);

as well as

export const AuthRouter = props => (
    <Authenticator hide={['Greetings']}>
        <AuthGreeting override={'Greetings'}/>
        {props.children}
    </Authenticator>

export default AuthRouter;

I tried both with and without the override parameter.

My AuthGreeting class is this:

import React, { Component } from 'react';
import { NavBar, Nav, NavRight, Greetings } from 'aws-amplify-react';

class AuthGreeting extends Greetings{
    constructor(props){
        super(props);
    }

render()
{
    const theme = this.props.theme;
    return(
        <NavBar theme={theme}>
            <Nav theme={theme}>
                <NavRight theme={theme}>
            <p>Test</p>
            </NavRight>
            </Nav>
        </NavBar>
    )
}
}

export default AuthGreeting;

Do you have any idea what I'm doing wrong? Would be great if you have some advices how I can replace the default Greetings bar with a customized one.

Thanks in advance :)

Regards Christian

Answer 1

I have solved it now in a different way. I use

export default withAuthenticator(AuthRouter, false) //Show no Greetings

additionally I get the current logged in user via

Auth.currentAuthenticatedUser({
bypassCache: false}).then(data => this.login(data)) //save username and groups in redux if available
.catch(err => this.logout());} //clear username and groups in redux

and add a listener that will update redux every time the user logs on of off

const listener = async (data) => {
    switch (data.payload.event) {

        case 'signIn':
            logger.error('user signed in');
            await this.login(data.payload.data)
            break;
        case 'signOut':
            logger.error('user signed out');
            await this.logout()
            break;          
    }
}

Hub.listen('auth', listener);

I added both to the componentDidMount() of my App.js with a StoreProvider in the index.js so I can access Redux

My wrapper also loads another wrapper where it checks redux if a user is logged in and displays the menu then.

This way I can also check if the user is a member of groups and therefore show only the menu entries he has permissions to watch.