Ask a Question

Using Auth0

Before we implement the login and logout system in our application make sure you have an auth0 account auth0. With your auth0 account created, select create application and choose the single page application. Now that you already have an account we can proceed with the tutorial.

In your code editor terminal, run the command:

yarn add @auth/auth0-react

After installing the auth0 library locate the file in the src/components/header.tsx folder and let’s add some more code to make our authentication work.

First we must import the library into our header.tsx file.

...
import { useAuth0, LogoutOptions } from '@auth0/auth0-react';
...

Next let’s add the necessary constants along with the logic to show the login and logout buttons:

...

const { isAuthenticated, loginWithRedirect, logout } = useAuth0();

const logInOut = !isAuthenticated ? (
	<span>
			<Button className="dgraph-btn mr-1">
			<a href="#" onClick={(event) => {
					event.preventDefault(); 
					loginWithRedirect()}}>Log in</a>
			</Button>
	</span>
	) : (
	<>
	<span>{addPostButton()}</span>
	<span>
			<Button className="dgraph-btn mr-1">
					<a
							href="#"
							onClick={() => {
									logout({ returnTo: window.location.origin } as LogoutOptions);
							} }
							>
					Log out
					</a>
			</Button>
	</span>
	</>
);
  ...

We’re almost there, notice that we moved our <span>{addPostButton()}</span> into the login logic, because now we want the button to add a new post to only appear for the user when he is Logged. Now check if the code snippet inside the header.tsx file looks like this.

...

return (
	<>
		{showCreatePost}
		<div className="ui clearing segment header-seg">
			<h3 className="ui right floated header header-seg-right">{logInOut}
			</h3>
			<h3 className="ui left floated header header-seg-left">
				<Link to="/">
					<div className="flex">
						<span>
							<Image size="tiny" src="/diggy.png" className="mr-5" />{" "}
						</span>
						<div>
							<p className="header-text">Dgraph</p>
							<p className="t-size">DISCUSS</p>
						</div>
					</div>
				</Link>
			</h3>
		</div>
	</>
  )
}

Done, now you can save the file, and run yarn start in the terminal.

Using Auth0

Dgraph

Company

Resources

Using Auth0

Dgraph

Company

Resources

Sign up for our newsletter