Okta wrapper for react native web based on okta-auth-js sdk.
npm install okta-react-native-web
import { OktaProvider } from 'okta-react-native-web';
// ...
const authClient = new OktaAuth({
issuer: 'https://{yourOktaDomain}/oauth2/default',
clientId: 'YOUR_CLIENT_ID_GOES_HERE',
redirectUri: 'YOUR_REDIRECT_URI_GOES_HERE',
});
const App = () => {
return (
<OktaProvider config={authClient}>
<Home />
</OktaProvider>
);
};
In your protected routes use HOC to connect to OktaProvider
import { withOkta } from 'okta-react-native-web';
// ...
const Home = () => {
//...
};
export default withOkta(Home);
Don't want to use protected routes ? Got your back, now you can use useOktaAuth
hook to get access to required props.
import { useOktaAuth } from 'okta-react-native-web';
// ...
const Home = () => {
const { accessToken, isAuthenticated, oktaClient, oktaLogin, oktaLogout } =
useOktaAuth();
//...
};
export default Home;
Props | Description | Type | Required |
---|---|---|---|
children | Pass your react elements here. You can put your navigation here to enable protected routes | ReactNode | yes |
config | Pass OktaAuth client here |
OktaAuth | yes |
redirectUri | Add custom redirect uri here | string | |
authRedirect | Add your custom redirect logic here | void | |
useLinking | Use React Native's linking api instead of the default signInWithRedirect implementation |
boolean | |
renderUnauthenticatedView | Render custom view for unaunthenticated users. By default it renders an ActivityIndicator |
JSX.Element |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT