1.0.0 • Published 1 year ago

reactjs-okta-verify v1.0.0

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

Getting Started with Okta integration in ReactJS

Go through below link - https://developer.okta.com/docs/guides/sign-into-spa-redirect/react/main/

Steps to integrate React with Okta :-

  1. Go to website to create account - https://www.okta.com/free-trial/
  2. Fill up all details like first name, last name, email, country
  3. Go to your mail, you will receive your account link and temporary password there. Sign in with Okta using that temporary password and then, change the password and setup Okta Verify app on your phone
  4. After all these steps, you will see Admin screen of your account
  5. Click on Applications (on sidebar menu) -> Applications -> Create App Integration
  6. Select these fields in the form - OIDC (OpenID Connect), Single-Page Application, Grant type as Authorization code & Refresh Token, Sign-in redirect URIs as http://localhost:3000/login/callback, Sign-out redirect URI as http://localhost:3000/
  7. Go to Security (on sidebar menu) -> API -> Trusted Origin tab -> Click on Add Origin
  8. Give Origin name, Origin URL as http://localhost:3000/, Choose Type will be all CORS, Redirect & iFrame

Available Scripts

In the project directory, you can run:

npm start

Steps to add my npm package in React CRA

  1. Install React CRA using -> npx create-react-app {project_name}
  2. Install my custom npm package -> npm i reactjs-okta-verify
  3. Add .env file in root project location and below variables in the .env file -

REACT_APP_ISSUER="https://trial-7134305.okta.com/oauth2/default" REACT_APP_CLIENT_ID="0oa54p54knJPeFKJE697" REACT_APP_REDIRECT_URI="http://localhost:3000/login/callback"

  1. Inside project, you will see App.js file.
  2. In App.js, import the package as -> import Okta from 'reactjs-okta-firefly/dist'
  3. After importing my package in App.js, use ->
  4. Now, run npm start in root project location