AuthProvider

Usage

OktaProvider

The OktaProvider component is a provider used to wrap components in order to make routes or components protected and provide necessary authentication props. It utilizes Okta authentication to handle login, logout, and authentication state management.

The OktaProvider component serves as the foundation for integrating Okta authentication into React Native applications. It provides the necessary context and configuration for other Okta-related components and hooks to function properly.

Usage Considerations

• Essential Integration Step: Incorporating the OktaProvider is an essential step when implementing Okta authentication in a React Native application. It lays the groundwork for authentication functionality and ensures a seamless user experience.

• Precondition for Other Components: Components such as withOkta and useOktaAuth depend on the presence of the OktaProvider within the component tree. Therefore, including the OktaProvider is a prerequisite for using these components to manage authentication.

• Centralized Authentication Setup: By using the OktaProvider, developers can centralize authentication setup and configuration, reducing redundancy and potential errors. This centralized approach streamlines authentication management and improves maintainability.

Props

Prop	Type	Required	Default Value	Description
authRedirect	() => void	No	-	Custom function to handle authentication redirection logic. If not provided, default Okta redirection behavior is used.
children	ReactNode	Yes	-	The child components that will be wrapped by the OktaProvider.
config	OktaAuth	Yes	-	OktaAuth configuration object.
redirectUri	string	No	-	Custom redirect URI for authentication. If not provided, Okta default redirect behavior is used.
useLinking	boolean	No	false	Flag to indicate whether to use React Native's linking API for redirection instead of Okta's default behavior.
renderUnauthenticatedView	JSX.Element	No	-	Custom view to render for unauthenticated users. If not provided, an ActivityIndicator is rendered by default.

Example

import React from "react";
import { OktaProvider } from "okta-react-native-web";

const App = () => (
  <OktaProvider config={authClient}>
    {/* Your protected routes or components */}
  </OktaProvider>
);