Svelte package to support ObjectReef Identity Provider.
ObjectReef Identity Provider is available at https://objectreef.io/auth and it's OIDC compliant
authorization service available for developers who create applications using ObjectReef
To install the package on your Svelte project type:npm install @humandialog/auth.svelte
// App.svelte
import {reef} from '@humandialog/auth.svelte'
reef.configure(
{
mode: 'remote', // possible: 'remote', 'local', 'disabled'
remote: {
iss: "https://objectreef.io",
client_id: "<YOUR_CLIENT_ID>",
client_secret: "<YOUR_CLIENT_SECRET>",
scope: "openid profile email <YOUR_APP_ID>",
api_version: "v001",
refresh_token_persistent: true,
// Used only for signup form. Optional.
// If specified checkboxes on consents are presented
terms_and_conditions_href: "https://example.com/terms-and-conditions"
privacy_policy_href: "https://example.com/privacy-policy"
},
local: {
api: "http://localhost:1996",
api_version: "v002",
users: [
"bob@example.com",
"alice@example.com"
]
}
})
In application root file App.svelte set up the the ObjectReef SDK with reef.configure
by passing
a configuration object. Authorization can be switched between 'remote'
and 'local'
or it can be 'disabled'
at all. The 'remote'
is the most common mode when your website is already published and registered in the ObjectReef Auth.
The 'local'
mode can be useful during the local developement when you need request API in context of specified user. The list of such users needs to be provided as users
array in configuration object. In this mode, the website asks current active user instead of redirecting the browser to sign-in page.
There are just few Svelte components to apply authorization to your website.
The AuthorizedView
should be a root component for all autorized views on your website. Usualy it embedd the whole App
content with routing component. \
The component parameters are:
autoRedirectToSignIn :boolean
which is true
by default. <!-- App.svelte -->
<AuthorizedView>
<!-- my SPA entry-point -->
<Router {routes} />
</AuthorizedView>
The Authorized
encapsulate content which should be visible only when user has been authorized.
<Authorized>
<a href={$signOutHRef}>Sign out</a>
</Authorized>
The NotAuthorized
encapsulate content which should be visible only when user has not been authorized.
<NotAuthorized>
<a href={$signInHRef}>Sign in</a>
</NotAuthorized>
reef.get
functionThe reef.get
makes HTTP GET request to the service and returns JavaScript object as a result. It will:
reef.configure
Authorization
header to each request with issued access token let res = await reef.get("app/Lists/count");
reef.post
functionThe reef.post
makes HTTP POST request to the service and returns JavaScript object as a result. It will:
reef.configure
Authorization
header to each request with issued access token let res = await reef.post("app/Lists/new", { Name: 'My List Name' });
reef.delete
functionThe reef.delete
makes HTTP DELETE request to the service. It will:
reef.configure
Authorization
header to each request with issued access token let res = await reef.delete("app/Lists/last");
reef.fetch
functionThe reef.fetch
is more general operation comparing to reef.get
or reef.post
.
It wraps original fetch
function with authorization support stuff. It will:
Authorization
header to each request with issued access token**NOTE:**
ObjectReef multitenancy support assumes every tenant API is available at different DNS address liketenant_qwerty.objectreef.io
. It means the proper API depends on which workspace authenticated user belongs to.
let res = await reef.fetch("/json/v001/app/Lists/new",
{
method:'POST',
body: JSON.stringify({Name: list_name})
});
reef.amIAdmin
functionThe reef.amIAdmin
makes HTTP GET request to the ObjectReef Identity Provider to check is authenticated user has admin privileges for current tenant.
let is_admin = await reef.amIAdmin();
$session.user
The $session.user
object contains authenticated user info
| member | type |
| ---------- | ------- |
| given_name
| string
|
| family_name
| string
|
| picture
| string
|
| email
| string
|
| email_verified
| boolean
|
$session.idToken
and $session.accessToken
Returns the idToken or accessToken object with members like the following:
| member | type |
| ---------- | ------- |
| header
| string
|
| payload
| string
|
| raw
| string
|
| is_jwt
| boolean
|
| not_expired
| boolean
|
| get_claim<T>(key :string)
| T\|undefined
|
$session.apiAddress :string
Returns tenant API address
$session.tid :string
Returns tenant id
$signInHRef
, $signOutHRef
and $signUpHRef
Returns string
value to make sign-in, sign-out or sign-up anchor
<a href={$signOutHRef}>Sign out</a>
<a href={$signInHRef}>Sign in</a>
<a href={$signUpHRef}>Sign up</a>
Enjoy!