Customize layout of AmplifySignOut

user_9981239 0
Viewed 1629

I'm currently working on a react app that integrates AWS Amplify. A great tool so far but I find it hard to customize components. Especially I would like to style the AmplifySignOut-component.

According to the documentation (see last paragraph on page) passing a theme to the withAuthenticator-component does not work like this anymore. I can't figure out how to pass a theme to the AmplifySignOut-component that overwrites the default layout for the button that is created. So far, I think that this is the default layout but I'm not 100% sure.

It would be great, if someone could point me in the right direction here :)

Im using the component like this (not working):

import React from 'react'
import { NavLink } from "react-router-dom";
import './Navbar.css'
import { AmplifySignOut } from '@aws-amplify/ui-react';


function Navbar(props) {
  const MyTheme = {
    NavButton: { 'fontWeight': '10' },
  }

  return (
    <div className="navbar">
      <NavLink exact to="/">Home</NavLink>
      <NavLink to="/pdservice">Drucker & Netzwerk</NavLink>
      <AmplifySignOut theme={MyTheme}/>
    </div>
  )
}

export default Navbar;

Best Regards

aws-amplify reactjs
2 Answers

In my case, i just ended up writing a completely custom button which calls the amplify function. you can style this one then completely as you want. maybe this code helps?

import React from 'react'
import {Auth} from "aws-amplify";


function CustomSignoutButton() {
  const signOut = (e) => {
      e.preventDefault();
      Auth.signOut();
      window.location.reload() <!-- it also works without, but just to really kick the user out.-->
    }
  return (
    <button onClick={signOut}>
      Sign out
    </button>
  )
}

export default CustomSignoutButton;
user_24820870

Create new component (in my case it is "src\components\SignOut.js")

import React from 'react'
import {Auth} from "aws-amplify";

function SignOutButton() {
    const signOut = (e) => {
        e.preventDefault();
        Auth.signOut().then(()=>{
            window.location.reload(false); 
        });
    }
    return (
        <button onClick={signOut}>
            Sign out
        </button>
    )
}

export default SignOutButton;

Import it in your app (remember to replace path with correct one if it differs with mine)

import SignOutButton from './components/SignOut';

Then you can use it anywhere you want

<SignOutButton />
user_173151350
Related