https://github.com/arkitektio/herre-ts

Oauth2 based Authentication Flows for React
https://github.com/arkitektio/herre-ts

arkitekt arkitekt-client typescript

Last synced: 17 days ago
JSON representation

Oauth2 based Authentication Flows for React

• Host: GitHub
• URL: https://github.com/arkitektio/herre-ts
• Owner: arkitektio
• Created: 2022-10-05T16:43:05.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-01-12T18:47:09.000Z (12 months ago)
• Last Synced: 2024-05-01T12:49:47.885Z (8 months ago)
• Topics: arkitekt, arkitekt-client, typescript
• Language: TypeScript
• Homepage: https://arkitekt.live
• Size: 162 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# herre-ts

Herre is a typescript libary for authenticating users via the Oauth2 Protocol and OpenID Connect.

Contrary to other libaries, this library focusses on purely client side authentication. Meaning

that all authentication is done in the browser. This is done via the PKCE extension of the Oauth2

"authorization code" flow.

## Installation

```bash

yarn add @jhnnsrs/herre

```

## Features

- [x] PKCE

- [x] Refresh tokens

- [x] User info endpoint inspection

- [ ] Silent refresh

## Usage

```typescript

import { Route, BrowserRouter as Router, Routes } from "react-router-dom";

import { useHerre, Callback, HerreProvider } from "@jhnnsrs/herre";

export const Test = () => {

  const { login, logout, token, refresh } = useHerre();

  return (

    <>

       login({

        grant: {

            clientId: "test",

            redirectUri: window.location.origin + "/callback",

            scopes: ["openid", "profile", "email"],

            clientSecret: "can be empty",

        },

        endpoint: {

            base_url: "http://localhost:8010/o", //base url of the authorization server

            tokenUrl: "http://localhost:8010/o/token", // if not provided, will be inferred

        }

      })}>Login

      

        Only visible when logged in

      

    >

  );

};

function App() {

  return (

    


        

             // Other router libraries can be used

                

                } />

                } /> //Default callback component

                

            

        

    

  );

}


export default App;

```