Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MacFJA/svelte-oauth2
OAuth2 authorization for Svelte
https://github.com/MacFJA/svelte-oauth2
oauth2 oauth2-authentication oauth2-client svelte svelte-kit svelte-v3 svelte3 sveltejs sveltekit
Last synced: 3 months ago
JSON representation
OAuth2 authorization for Svelte
- Host: GitHub
- URL: https://github.com/MacFJA/svelte-oauth2
- Owner: MacFJA
- License: mit
- Created: 2021-09-05T18:11:33.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-24T00:41:04.000Z (about 2 years ago)
- Last Synced: 2024-07-18T14:51:48.030Z (4 months ago)
- Topics: oauth2, oauth2-authentication, oauth2-client, svelte, svelte-kit, svelte-v3, svelte3, sveltejs, sveltekit
- Language: TypeScript
- Homepage:
- Size: 43.9 KB
- Stars: 39
- Watchers: 4
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-svelte-kit - SvelteKit with oAuth2
README
# Svelte (and SvelteKit) OAuth2
Add OAuth2 authorization in Svelte
## Installation
```
npm install @macfja/svelte-oauth2
```
## Examples
### Svelte
```html
import Auth, { init, browserStrategy, AuthorizationCodePKCE, addAuthHeader } from "@macfja/svelte-oauth2"
init(
browserStrategy,
new AuthorizationCodePKCE(
browserStrategy,
'$$gitlab client id$$',
'http://localhost:5000/',
'https://gitlab.com/oauth/token',
'https://gitlab.com/oauth/authorize',
'http://localhost:5000/',
)
)
let username
const getUserName = () => {
addAuthHeader().then(headers => {
fetch('https://gitlab.com/api/v4/user', { headers })
.then(response => response.json())
.then(response => username = response.username)
})
}
Loading...
{error.message}
Hello {username}!
```
### SvelteKit
`src/hooks.js`
```javascript
import { svelteKitStrategy } from "@macfja/svelte-oauth2"
export async function handle({ request, resolve }) {
return svelteKitStrategy.handleHook({request, resolve})
}
```
`src/routes/index.html`
```html
import { init, svelteKitStrategy, AuthorizationCodePKCE, runOAuth2Process } from "@macfja/svelte-oauth2"
const scopes = ['read_user'];
export const load = async ({fetch, page}) => {
svelteKitStrategy.setFetch(fetch)
svelteKitStrategy.setQuery(page.query)
init(
svelteKitStrategy,
new AuthorizationCodePKCE(
svelteKitStrategy,
'$$gitlab client id$$',
'http://localhost:3000/',
'https://gitlab.com/oauth/token',
'https://gitlab.com/oauth/authorize',
'http://localhost:3000/',
)
)
try {
return {
props: { authentication: await runOAuth2Process(scopes) }
}
} catch (e) {
return {
props: { authentication: Promise.reject(e) }
}
}
}
import Auth, { addAuthHeader } from "@macfja/svelte-oauth2"
export let authentication
/*
For the example purpose this is done in the browser, but can also be done in SSR
See below.
*/
let username
const getUserName = () => {
addAuthHeader().then(headers => {
fetch('https://gitlab.com/api/v4/user', { headers })
.then(response => response.json())
.then(response => username = response.username)
})
}
Welcome to SvelteKit
Visit kit.svelte.dev to read the documentation
Loading...
{error.message}
Hello {username}!
```
### SvelteKit full SSR
`src/hooks.js`
```javascript
import { svelteKitStrategy } from "@macfja/svelte-oauth2"
export async function handle({ request, resolve }) {
return svelteKitStrategy.handleHook({request, resolve})
}
```
`src/routes/index.html`
```html
import { init, svelteKitStrategy, AuthorizationCodePKCE, runOAuth2Process, addAuthHeader, isAuthorized } from "@macfja/svelte-oauth2"
const scopes = ['read_user'];
export const load = async ({fetch, page}) => {
svelteKitStrategy.setFetch(fetch)
svelteKitStrategy.setQuery(page.query)
init(
svelteKitStrategy,
new AuthorizationCodePKCE(
svelteKitStrategy,
'$$gitlab client id$$',
'http://localhost:3000/',
'https://gitlab.com/oauth/token',
'https://gitlab.com/oauth/authorize',
'http://localhost:3000/',
)
)
try {
const auth = await runOAuth2Process(scopes)
let username;
if (await isAuthorized(scopes)) {
username = await getUserName()
}
return {
props: { authentication: auth, username }
}
} catch (e) {
return {
props: { authentication: Promise.reject(e) }
}
}
}
const getUserName = () => {
return addAuthHeader().then(headers => {
return fetch('https://gitlab.com/api/v4/user', { headers })
.then(response => response.json())
.then(response => response.username)
})
}
import Auth from "@macfja/svelte-oauth2"
export let authentication
export let username
const onAuth = () => {
if (username !== undefined) return
getUserName().then(value => username = value)
}
Welcome to SvelteKit
Visit kit.svelte.dev to read the documentation
Loading...
{error.message}
Hello {username}!
```
## Available Grant
### Client Credential
Implementation of [Client Credential](https://oauth.net/2/grant-types/client-credentials/) flow
```javascript
import { ClientCredentials } from "@macfja/svelte-oauth2"
new ClientCredentials(
contextStrategy, // The context strategy to use (How the auth integrate with the app), Svelte/Browser or SvelteKit
'Client Id', // The OAuth2 Client Id
'Client Secret', // The OAuth2 Client Secret
'Token Uri', // The Auth Server URI where to get the access token.
'Post Authenticate Uri', // The application URI to go when the user is authenticated.
credentialMode, // Where to put credential (Client Id and Client Secret). "request" or "header"
)
```
### Authorization Code
Implementation of [Authorization Code](https://oauth.net/2/grant-types/authorization-code/) flow
```javascript
import { AuthorizationCode } from "@macfja/svelte-oauth2"
new AuthorizationCode(
contextStrategy, // The context strategy to use (How the auth integrate with the app), Svelte/Browser or SvelteKit
'Client Id', // The OAuth2 Client Id
'Client Secret', // The OAuth2 Client Secret
'Post Login Redirect Uri', // The application URI to go when the user is authenticated.
'Token Uri', // The Auth Server URI where to get the access token.
'Post Authenticate Uri', // The application URI to go when the user is authenticated.
'Authorization Redirect Uri', // The application URI to go back from the Auth Server
credentialMode, // Where to put credential (Client Id and Client Secret). "request" or "header"
)
```
### Authorization Code With PKCE
Implementation of [PKCE](https://oauth.net/2/pkce/) flow
```javascript
import { AuthorizationCodePKCE } from "@macfja/svelte-oauth2"
new AuthorizationCodePKCE(
contextStrategy, // The context strategy to use (How the auth integrate with the app), Svelte/Browser or SvelteKit
'Client Id', // The OAuth2 Client Id
'Post Login Redirect Uri', // The application URI to go when the user is authenticated.
'Token Uri', // The Auth Server URI where to get the access token.
'Post Authenticate Uri', // The application URI to go when the user is authenticated.
'Authorization Redirect Uri', // The application URI to go back from the Auth Server
)
```
## Contributing
Contributions are welcome. Please open up an issue or create PR if you would like to help out.
Read more in the [Contributing file](CONTRIBUTING.md)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.