withOkta

Usage

withOkta HOC

withOkta is a higher-order component (HOC) designed to connect a component with the OktaContext and provide the necessary authentication props. It simplifies the process of integrating Okta authentication into React Native applications.

Example

To use the withOkta HOC, import it and wrap your component:

import React from "react";
import { Text, View } from "react-native";
import { withOkta } from "okta-react-native-web";

const Home = (props) => {
  const {
    isAuthenticated,
    oktaClient,
    accessToken,
    oktaLogin,
    oktaLogout,
    idToken,
    user,
  } = props;

  return (
    <View>
      <Text>Home</Text>
      {/* Add your authenticated component logic here */}
    </View>
  );
};

export default withOkta(Home);

Props

The withOkta HOC provides the following props to the wrapped component:

Prop	Type	Description
isAuthenticated	boolean	Indicates whether the user is authenticated.
oktaClient	OktaAuth | undefined	Okta client instance for authentication operations.
accessToken	AccessToken | undefined	Access token for the authenticated user.
oktaLogin	function	Initiates the Okta login process.
oktaLogout	function	Initiates the Okta logout process.
idToken	IDToken | undefined	ID token for the authenticated user.
user	UserClaims | undefined	Information about the authenticated user.

Given below is a demonstration of usage of props inside a protected

import React from "react";
import { Text, View, Button } from "react-native";
import { withOkta } from "okta-react-native-web";

const Home = (props) => {
  const { isAuthenticated, oktaLogin, oktaLogout } = props;

  const handleLogin = () => {
    oktaLogin();
  };

  const handleLogout = () => {
    oktaLogout();
  };

  return (
    <View>
      <Text>Home</Text>
      {isAuthenticated ? (
        <Button title="Logout" onPress={handleLogout} />
      ) : (
        <Button title="Login" onPress={handleLogin} />
      )}
    </View>
  );
};

export default withOkta(Home);