Search code examples
reactjsjsxauth0

Is there a way to add the Auth0 sign in button to the navbar using some Javascript


I am trying to add the Auth0 button to a navbar but the jsx linter does not like it when I add javascript. I need the conditional so it shows up for non registered users. I have tried importing it from another component ion React as well as adding it directly in the jsx with no luck. I keep getting isAuthenticated' is not defined and loginWithRedirect' is not defined. Not sure what to do next. Thanks.

import $ from 'jquery'
import '../styles/nav.scss'
import button from '../components/GoogleButton/Button.jsx'
import { auth0 } from './auth0/react-auth0-spa'

export default class NavBar extends Component {
    componentDidMount() {
        $(document).ready(function() {
            $('.mobile-button a').click(function(e) {
                $(this)
                    .parent()
                    .parent()
                    .toggleClass('open')
                $(this).html($(this).html() === 'Close Menu' ? 'Menu' : 'Close Menu')
                e.preventDefault()
            })
        })
    }

    render() {
        return (
            <div>
                <header class='header'>
                    <div class='container'>
                        <h1 class='site-title'>Super Cool Web App!</h1>
                        <span class='site-tagline'>Because Andy made this!</span>
                    </div>
                </header>
                <nav class='main-nav'>
                    <div class='container'>
                        <ul>
                            <li class='mobile-button'>
                                <a href='/'>Menu</a>
                            </li>
                            <li>
                                <a href='/'>About</a>
                            </li>
                            <li>
                                {/* this is where the problem lies */}
                                {!isAuthenticated && (
                                    <button onClick={() => loginWithRedirect({})}>Log in</button>
                                )}
                            </li>
                            <li>
                                <a href='/'>Methods</a>
                            </li>
                            <li>
                                <a href='/'>Results</a>
                            </li>
                            <li>
                                <a href='/'>Contact</a>
                            </li>
                            <li>
                                <a href='/'>Methods</a>
                            </li>
                            <li>
                                <a href='/'>Results</a>
                            </li>
                            <li>
                                <a href='/'>Contact</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        )
    }
}```

Solution

  • authO is for initializing you need to use useAuthO to access the api elsewhere in your project.

    Change your import statement to:

    import { useAuth0 } from "../react-auth0-spa";
    

    Then deconstruct AuthO methods isAuthenticated and loginWithRedirect.

    Right under render and before your return put:

    const {isAuthenticated , loginWithRedirect} = useAuth0
    

    https://auth0.com/docs/quickstart/spa/react#create-the-navbar-component