Implementing a login button requires that you know IF you should show the button as well as how to implement the button.
okta-react SDK provides you with:
- an authState object that provides information on the state of the current user's authentication
- an authService object that provides methods to read more details about, or to modify, the current authentication
Function-based components can use the
useOktaAuth React hook to access the
authService or the
Class-based components can use the
withOktaAuth higher-order component to receive the
authState objects as props.
You can use the
authState.isAuthenticated property to show or hide a button depending on whether the user is signed in.
authService.login() method lets you specify the path you'd like the user to be navigated to after authenticating.
Function-based component example:
Class-based component example: