{"id":13598935,"url":"https://github.com/MacFJA/svelte-oauth2","last_synced_at":"2025-04-10T10:30:41.983Z","repository":{"id":143759013,"uuid":"403380636","full_name":"MacFJA/svelte-oauth2","owner":"MacFJA","description":"OAuth2 authorization for Svelte","archived":false,"fork":false,"pushed_at":"2022-09-24T00:41:04.000Z","size":45,"stargazers_count":41,"open_issues_count":5,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-31T05:31:30.806Z","etag":null,"topics":["oauth2","oauth2-authentication","oauth2-client","svelte","svelte-kit","svelte-v3","svelte3","sveltejs","sveltekit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MacFJA.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-09-05T18:11:33.000Z","updated_at":"2024-12-12T18:47:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"5df0608f-d691-4ea3-82b7-c3e2312cdda6","html_url":"https://github.com/MacFJA/svelte-oauth2","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MacFJA%2Fsvelte-oauth2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MacFJA%2Fsvelte-oauth2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MacFJA%2Fsvelte-oauth2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MacFJA%2Fsvelte-oauth2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MacFJA","download_url":"https://codeload.github.com/MacFJA/svelte-oauth2/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247589835,"owners_count":20963022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["oauth2","oauth2-authentication","oauth2-client","svelte","svelte-kit","svelte-v3","svelte3","sveltejs","sveltekit"],"created_at":"2024-08-01T17:00:58.244Z","updated_at":"2025-04-10T10:30:41.617Z","avatar_url":"https://github.com/MacFJA.png","language":"TypeScript","funding_links":[],"categories":["🏃 SvelteKit Starter Kits and Integrations"],"sub_categories":["The _How To's?_"],"readme":"# Svelte (and SvelteKit) OAuth2\n\nAdd OAuth2 authorization in Svelte \n\n## Installation\n\n```\nnpm install @macfja/svelte-oauth2\n```\n\n## Examples\n\n### Svelte\n\n```html\n\u003cscript\u003e\n    import Auth, { init, browserStrategy, AuthorizationCodePKCE, addAuthHeader } from \"@macfja/svelte-oauth2\"\n\n    init(\n        browserStrategy,\n        new AuthorizationCodePKCE(\n            browserStrategy,\n            '$$gitlab client id$$',\n            'http://localhost:5000/',\n            'https://gitlab.com/oauth/token',\n            'https://gitlab.com/oauth/authorize',\n            'http://localhost:5000/',\n        )\n    )\n\n    let username\n    const getUserName = () =\u003e {\n        addAuthHeader().then(headers =\u003e {\n            fetch('https://gitlab.com/api/v4/user', { headers })\n                .then(response =\u003e response.json())\n                .then(response =\u003e username = response.username)\n        })\n    }\n\u003c/script\u003e\n\n\u003cAuth scopes={['read_user']} on:authenticated={getUserName}\u003e\n    \u003cdiv slot=\"loading\"\u003eLoading...\u003c/div\u003e\n    \u003cdiv slot=\"error\" let:error\u003e{error.message}\u003c/div\u003e\n    Hello {username}!\n\u003c/Auth\u003e\n```\n\n### SvelteKit\n\n`src/hooks.js`\n```javascript\nimport { svelteKitStrategy } from \"@macfja/svelte-oauth2\"\n\nexport async function handle({ request, resolve }) {\n    return svelteKitStrategy.handleHook({request, resolve})\n}\n```\n`src/routes/index.html`\n```html\n\u003cscript context=\"module\"\u003e\n    import { init, svelteKitStrategy, AuthorizationCodePKCE, runOAuth2Process } from \"@macfja/svelte-oauth2\"\n\n    const scopes = ['read_user'];\n\n    export const load = async ({fetch, page}) =\u003e {\n        svelteKitStrategy.setFetch(fetch)\n        svelteKitStrategy.setQuery(page.query)\n        init(\n            svelteKitStrategy,\n            new AuthorizationCodePKCE(\n                svelteKitStrategy,\n                '$$gitlab client id$$',\n                'http://localhost:3000/',\n                'https://gitlab.com/oauth/token',\n                'https://gitlab.com/oauth/authorize',\n                'http://localhost:3000/',\n            )\n        )\n        try {\n            return {\n                props: { authentication: await runOAuth2Process(scopes) }\n            }\n        } catch (e) {\n            return {\n                props: { authentication: Promise.reject(e) }\n            }\n        }\n    }\n\u003c/script\u003e\n\u003cscript\u003e\n    import Auth, { addAuthHeader } from \"@macfja/svelte-oauth2\"\n\n    export let authentication\n    /*\n     For the example purpose this is done in the browser, but can also be done in SSR\n     See below.\n     */\n    let username\n    const getUserName = () =\u003e {\n        addAuthHeader().then(headers =\u003e {\n            fetch('https://gitlab.com/api/v4/user', { headers })\n                .then(response =\u003e response.json())\n                .then(response =\u003e username = response.username)\n        })\n    }\n\u003c/script\u003e\n\n\u003ch1\u003eWelcome to SvelteKit\u003c/h1\u003e\n\u003cp\u003eVisit \u003ca href=\"https://kit.svelte.dev\"\u003ekit.svelte.dev\u003c/a\u003e to read the documentation\u003c/p\u003e\n\n\u003cAuth scopes={['read_user']} on:authenticated={getUserName}\u003e\n    \u003cdiv slot=\"loading\"\u003eLoading...\u003c/div\u003e\n    \u003cdiv slot=\"error\" let:error\u003e{error.message}\u003c/div\u003e\n    Hello {username}!\n\u003c/Auth\u003e\n```\n\n### SvelteKit full SSR\n`src/hooks.js`\n```javascript\nimport { svelteKitStrategy } from \"@macfja/svelte-oauth2\"\n\nexport async function handle({ request, resolve }) {\n    return svelteKitStrategy.handleHook({request, resolve})\n}\n```\n`src/routes/index.html`\n```html\n\u003cscript context=\"module\"\u003e\n    import { init, svelteKitStrategy, AuthorizationCodePKCE, runOAuth2Process, addAuthHeader, isAuthorized } from \"@macfja/svelte-oauth2\"\n\n    const scopes = ['read_user'];\n\n    export const load = async ({fetch, page}) =\u003e {\n        svelteKitStrategy.setFetch(fetch)\n        svelteKitStrategy.setQuery(page.query)\n        init(\n            svelteKitStrategy,\n            new AuthorizationCodePKCE(\n                svelteKitStrategy,\n                '$$gitlab client id$$',\n                'http://localhost:3000/',\n                'https://gitlab.com/oauth/token',\n                'https://gitlab.com/oauth/authorize',\n                'http://localhost:3000/',\n            )\n        )\n        try {\n            const auth = await runOAuth2Process(scopes)\n            let username;\n            if (await isAuthorized(scopes)) {\n                username = await getUserName()\n            }\n            return {\n                props: { authentication: auth, username }\n            }\n        } catch (e) {\n            return {\n                props: { authentication: Promise.reject(e) }\n            }\n        }\n    }\n\n    const getUserName = () =\u003e {\n        return addAuthHeader().then(headers =\u003e {\n            return fetch('https://gitlab.com/api/v4/user', { headers })\n                    .then(response =\u003e response.json())\n                    .then(response =\u003e response.username)\n        })\n    }\n\u003c/script\u003e\n\u003cscript\u003e\n    import Auth from \"@macfja/svelte-oauth2\"\n\n    export let authentication\n    export let username\n    const onAuth = () =\u003e {\n        if (username !== undefined) return\n        getUserName().then(value =\u003e username = value)\n    }\n\u003c/script\u003e\n\n\u003ch1\u003eWelcome to SvelteKit\u003c/h1\u003e\n\u003cp\u003eVisit \u003ca href=\"https://kit.svelte.dev\"\u003ekit.svelte.dev\u003c/a\u003e to read the documentation\u003c/p\u003e\n\n\u003cAuth scopes={['read_user']} on:authenticated={onAuth}\u003e\n    \u003cdiv slot=\"loading\"\u003eLoading...\u003c/div\u003e\n    \u003cdiv slot=\"error\" let:error\u003e{error.message}\u003c/div\u003e\n    Hello {username}!\n\u003c/Auth\u003e\n```\n\n## Available Grant\n\n### Client Credential\n\nImplementation of [Client Credential](https://oauth.net/2/grant-types/client-credentials/) flow\n```javascript\nimport { ClientCredentials } from \"@macfja/svelte-oauth2\"\nnew ClientCredentials(\n    contextStrategy, // The context strategy to use (How the auth integrate with the app), Svelte/Browser or SvelteKit\n    'Client Id', // The OAuth2 Client Id\n    'Client Secret', // The OAuth2 Client Secret\n    'Token Uri', // The Auth Server URI where to get the access token.\n    'Post Authenticate Uri', // The application URI to go when the user is authenticated.\n    credentialMode, // Where to put credential (Client Id and Client Secret). \"request\" or \"header\"\n)\n```\n\n### Authorization Code\n\nImplementation of [Authorization Code](https://oauth.net/2/grant-types/authorization-code/) flow\n```javascript\nimport { AuthorizationCode } from \"@macfja/svelte-oauth2\"\nnew AuthorizationCode(\n    contextStrategy, // The context strategy to use (How the auth integrate with the app), Svelte/Browser or SvelteKit\n    'Client Id', // The OAuth2 Client Id\n    'Client Secret', // The OAuth2 Client Secret\n    'Post Login Redirect Uri', // The application URI to go when the user is authenticated.\n    'Token Uri', // The Auth Server URI where to get the access token.\n    'Post Authenticate Uri', // The application URI to go when the user is authenticated.\n    'Authorization Redirect Uri', // The application URI to go back from the Auth Server\n    credentialMode, // Where to put credential (Client Id and Client Secret). \"request\" or \"header\"\n)\n```\n\n### Authorization Code With PKCE\n\nImplementation of [PKCE](https://oauth.net/2/pkce/) flow\n```javascript\nimport { AuthorizationCodePKCE } from \"@macfja/svelte-oauth2\"\nnew AuthorizationCodePKCE(\n    contextStrategy, // The context strategy to use (How the auth integrate with the app), Svelte/Browser or SvelteKit\n    'Client Id', // The OAuth2 Client Id\n    'Post Login Redirect Uri', // The application URI to go when the user is authenticated.\n    'Token Uri', // The Auth Server URI where to get the access token.\n    'Post Authenticate Uri', // The application URI to go when the user is authenticated.\n    'Authorization Redirect Uri', // The application URI to go back from the Auth Server\n)\n```\n\n## Contributing\n\nContributions are welcome. Please open up an issue or create PR if you would like to help out.\n\nRead more in the [Contributing file](CONTRIBUTING.md)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMacFJA%2Fsvelte-oauth2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMacFJA%2Fsvelte-oauth2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMacFJA%2Fsvelte-oauth2/lists"}