Hello {auth.profile.name}!
; 19 | }; 20 | ``` 21 | 22 | The example above uses `id_token` object (`profile`) and displays the name of 23 | the user. 24 | 25 | It should be as easy as that! 26 | -------------------------------------------------------------------------------- /guides/QUICKSTART.md: -------------------------------------------------------------------------------- 1 | # Quickstart 2 | 3 | First step is to install the package. 4 | 5 | ```shell 6 | $ npm install oidc-react 7 | ``` 8 | 9 | ## Setting up `AuthProvider` 10 | 11 | AuthProvider is a [Context](https://reactjs.org/docs/context.html) and holds 12 | most of the functionality of this package. In order to make it work with your 13 | very own OIDC server, you'll have to either setup your own 14 | [`UserManager`](https://authts.github.io/oidc-client-ts/classes/UserManager.html) 15 | or use the shortcut. In this guide, we'll use our shortcuts. 16 | 17 | Let's look at an example component. 18 | 19 | ```tsx 20 | import { AuthProvider } from 'oidc-react'; 21 | 22 | export default () => ( 23 |Hello {this.props.authData.profile.name}!
; 18 | } 19 | } 20 | 21 | export default withAuth(Hello); 22 | ``` 23 | 24 | The example above uses `id_token` object (`profile`) and displays the name of 25 | the user. 26 | 27 | It should be as easy as that! 28 | -------------------------------------------------------------------------------- /guides/migrate-v1-v2.md: -------------------------------------------------------------------------------- 1 | # Migrate from v1 to v2 2 | 3 | Back in june 2021 `oidc-client-js` was deprecated, which lead us to start 4 | looking for a suitable replacement. Keeping tabs on what could suit our needs 5 | and the maintainability of the library had us wait until now. 6 | 7 | The largest change is migrating from `oidc-client-js` to `oidc-client-ts`. For 8 | consumers of this package, this means mostly that if you are importing 9 | `oidc-client` somewhere in your code. You have to replace it with 10 | `oidc-client-ts`. 11 | 12 | You can find more documentation on `oidc-client-ts` here: 13 | https://github.com/authts/oidc-client-ts 14 | 15 | They have written a migration guide, you can find that here: 16 | https://github.com/authts/oidc-client-ts/blob/main/docs/migration.md 17 | 18 | Other than that, we have also started supporting React 18. 🚀 19 | 20 | We haven't tested this extensively, so be sure to share your input and 21 | experiences with us! 22 | 23 | Thank you for using `oidc-react`. 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "oidc-react", 3 | "version": "3.4.1", 4 | "private": false, 5 | "description": "OpenID Connect Authentication for React. Supports Hooks 🚀", 6 | "repository": "github:bjerkio/oidc-react", 7 | "license": "MIT", 8 | "author": "Bjerk AS", 9 | "main": "build/src/index.js", 10 | "packageManager": "pnpm@8.15.9", 11 | "files": [ 12 | "/build" 13 | ], 14 | "prettier": "@simenandre/prettier", 15 | "scripts": { 16 | "start": "node build/index.js", 17 | "build": "tsc -p tsconfig.release.json", 18 | "test": "vitest", 19 | "format": "prettier --write .", 20 | "format:check": "prettier --check .", 21 | "lint": "eslint .", 22 | "generate-docs": "typedoc" 23 | }, 24 | "dependencies": { 25 | "oidc-client-ts": "^2.4.0" 26 | }, 27 | "devDependencies": { 28 | "@bjerk/eslint-config": "^6.0.2", 29 | "@simenandre/prettier": "^5.0.0", 30 | "@testing-library/react": "^16.0.0", 31 | "@types/node": "^20.0.0", 32 | "@types/react": "^18.2.12", 33 | "eslint": "^9.0.0", 34 | "jsdom": "^22.1.0", 35 | "prettier": "^3.0.3", 36 | "react": "^18.2.0", 37 | "react-dom": "^18.2.0", 38 | "ts-node-dev": "^2.0.0", 39 | "typedoc": "^0.26.10", 40 | "typedoc-plugin-markdown": "^4.2.9", 41 | "typescript": "^5.2.2", 42 | "vitest": "^2.0.0" 43 | }, 44 | "peerDependencies": { 45 | "react": "^16.8.0 || ^17.0.0 || ^18.0.0", 46 | "react-dom": "^16.8.0 || || ^17.0.0 || ^18.0.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/__tests__/auth-context.test.tsx: -------------------------------------------------------------------------------- 1 | // @vitest-environment jsdom 2 | import React from 'react'; 3 | import { SilentRenewErrorCallback, UserManager } from 'oidc-client-ts'; 4 | import { AuthProvider, AuthContext } from '../auth-context'; 5 | import { render, act, waitFor, RenderResult } from '@testing-library/react'; 6 | import { describe, it, expect, vi } from 'vitest'; 7 | 8 | const events = { 9 | addUserLoaded: () => undefined, 10 | removeUserLoaded: () => undefined, 11 | addSilentRenewError: () => undefined, 12 | removeSilentRenewError: () => undefined, 13 | }; 14 | 15 | vi.mock('oidc-client-ts', () => { 16 | return { 17 | UserManager: vi.fn().mockImplementation(() => { 18 | return { 19 | getUser: vi.fn(), 20 | signinRedirect: vi.fn(), 21 | events, 22 | }; 23 | }), 24 | }; 25 | }); 26 | 27 | describe('AuthContext', () => { 28 | it('should check for user and redirect', async () => { 29 | const u = { 30 | getUser: vi.fn(), 31 | signinRedirect: vi.fn(), 32 | events, 33 | } as any; 34 | const onBeforeSignIn = vi.fn(); 35 | await act(async () => { 36 | render(Bjerk
; 56 | }} 57 |Bjerk
; 79 | }} 80 |Bjerk
; 293 | }} 294 |Bjerk
; 320 | }} 321 |Bjerk
; 345 | }} 346 |( 9 | Component: React.ComponentType
,
10 | ): React.ComponentType