Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sehgalrishabh/okta-react-native-web
Okta wrapper for React-Native-Web. Provides authentication flow and secured routes for react-native-web applications
https://github.com/sehgalrishabh/okta-react-native-web
npm npm-package npmjs okta okta-api okta-oidc react-native react-native-web reactjs
Last synced: 5 days ago
JSON representation
Okta wrapper for React-Native-Web. Provides authentication flow and secured routes for react-native-web applications
- Host: GitHub
- URL: https://github.com/sehgalrishabh/okta-react-native-web
- Owner: sehgalrishabh
- License: mit
- Created: 2024-01-11T12:15:12.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-05-24T16:26:39.000Z (4 months ago)
- Last Synced: 2024-09-25T19:11:21.798Z (8 days ago)
- Topics: npm, npm-package, npmjs, okta, okta-api, okta-oidc, react-native, react-native-web, reactjs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/okta-react-native-web
- Size: 2.86 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
 
# okta-react-native-web
Okta wrapper for react native web based on okta-auth-js sdk.
## Installation
```sh
npm install okta-react-native-web
```
## Usage
```js
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 (
);
};
```
In your protected routes use HOC to connect to OktaProvider
```js
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.
```js
import { useOktaAuth } from 'okta-react-native-web';
// ...
const Home = () => {
const { accessToken, isAuthenticated, oktaClient, oktaLogin, oktaLogout } =
useOktaAuth();
//...
};
export default Home;
```
## Supported props for `OktaProvider`
| Props | Description | Type | Required |
| ------------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -------- |
| children | Pass your react elements here. You can put your navigation here to enable protected routes | [ReactNode](https://reactnative.dev/docs/react-node) | yes |
| config | Pass `OktaAuth` client here | [OktaAuth](https://github.com/okta/okta-auth-js?tab=readme-ov-file#configuration) | 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 | |
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
```
```