Introduction to Okta Auth JS

Okta Auth JS is a powerful JavaScript library that enables seamless authentication and user management within your applications. This guide will delve into its myriad APIs and provide code snippets to illustrate their usage. Moreover, we will show you how to integrate these APIs into a sample application.

Getting Started with Okta Auth JS

  
    // Install the Okta Auth JS package
    npm install @okta/okta-auth-js
  

Initializing the Okta Auth Client

  
    import { OktaAuth } from '@okta/okta-auth-js';

    const config = {
      clientId: 'your-client-id',
      issuer: 'https://{yourOktaDomain}/oauth2/default',
      redirectUri: 'http://localhost:8080/callback'
    };

    const oktaAuth = new OktaAuth(config);
  

User Authentication APIs

Sign In

  
    const signIn = async (username, password) => {
      try {
        const transaction = await oktaAuth.signIn({ username, password });
        if (transaction.status === 'SUCCESS') {
          oktaAuth.token.getWithRedirect({ 
            sessionToken: transaction.sessionToken 
          });
        }
      } catch (err) {
        console.error(err);
      }
    };
  

Sign Out

  
    const signOut = async () => {
      await oktaAuth.signOut();
    };
  

Get Tokens

  
    const getTokens = async () => {
      const tokens = await oktaAuth.token.parseFromUrl();
      oktaAuth.tokenManager.setTokens(tokens);
    };
  

Refresh Token

  
    const refreshToken = async () => {
      const newTokens = await oktaAuth.tokenManager.renew('idToken');
      oktaAuth.tokenManager.setTokens(newTokens);
    };
  

User Management APIs

Get User Info

  
    const getUser = async () => {
      const userInfo = await oktaAuth.token.getUserInfo();
      console.log(userInfo);
    };
  

Forgot Password

  
    const forgotPassword = async (username) => {
      try {
        await oktaAuth.forgotPassword({ username });
        console.log('Password reset email sent.');
      } catch (err) {
        console.error(err);
      }
    };
  

Sample Application

Below is a basic example demonstrating how Okta Auth JS can be seamlessly integrated into a Vanilla JavaScript application for authentication.

  
    //index.html
    
    
    
      
      
    
    
      
Welcome to Okta Auth JS Example
      

        
        
        Login

        

        Logout
      
    
    

    //main.js
    import { oktaAuth } from './oktaConfig';

    document.getElementById('loginButton').addEventListener('click', async () => {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      
      try {
        await signIn(username, password);
        const userInfo = await getUser();
        document.getElementById('userInfo').textContent = `Welcome, ${userInfo.name}`;
      } catch (err) {
        console.error(err);
      }
    });
    
    document.getElementById('logoutButton').addEventListener('click', async () => {
      try {
        await signOut();
        document.getElementById('userInfo').textContent = 'You have been logged out.';
      } catch (err) {
        console.error(err);
      }
    });
  

By following this guide, you should be well-equipped to implement Okta Auth JS within your JavaScript applications, ensuring secure and efficient user authentication and management.

Hash: 7d2702e5fe1cc6cc6ae6e5f001bf98e7d704333d0c439befbf64611e9718ff2a