Add a button to sign in

In your application, you want to provide a button to sign the user in. When the user clicks this button, they are redirected to the Okta-hosted sign-in page so they can authenticate.

Note: To customize this sign-in page, see the Style the Widget.

• Angular
• React
• Vue.js

Implementing a login button requires that you know IF you should show the button as well as how to implement the button.

The 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 authState objects.

Class-based components can use the withOktaAuth higher-order component to receive the authService and 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.

The authService.login() method lets you specify the path you'd like the user to be navigated to after authenticating.

Function-based component example:

import { useOktaAuth } from '@okta/okta-react';
import React from 'react';

const Home = () => { 
  const { authState, authService } = useOktaAuth();
  const login = () => authService.login('/profile');

  if( authState.isPending ) { 
    return (
      <div>Loading authentication...</div>
    );
  } else if( !authState.isAuthenticated ) { 
    return (
      <div>
        <a onClick={login}>Login</a>
      </div>
    );
  }
};
export default Home;

Class-based component example:

import { withOktaAuth } from '@okta/okta-react';
import React, { Component } from 'react';

export default withOktaAuth(class Home extends Component {
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
  }

  async login() {
    this.props.authService.login('/profile');
  }

  render() {
    if( this.props.authState.isPending ) { 
      return (
        <div>Loading authentication...</div>
      );
    } else if( !this.props.authState.isAuthenticated ) { 
      return (
        <div>
          <a onClick={this.login}>Login</a>
        </div>
      );
    }
  }
});

Next: Handle the callback from Okta