+27 -4

README.md

··· 20 20 21 21 ### or manually install in your own project 22 22 23 23 - - copy the `src/lib/oauth` folder into your own project 24 24 - - also copy the `src/routes/client-metadata.json` folder into your project 25 25 - - add the following to your `src/routes/+layout.svelte` 23 23 + 1. copy the `src/lib/oauth` folder into your own project 24 24 + 2. also copy the `src/routes/client-metadata.json` folder into your project 25 25 + 3. add the following to your `src/routes/+layout.svelte` 26 26 27 27 ```svelte 28 28 <script> ··· 36 36 {@render children()} 37 37 ``` 38 38 39 39 + 4. add server and port to your `vite.config.ts` 40 40 + 41 41 + ```js 42 42 + export default defineConfig({ 43 43 + server: { 44 44 + host: '127.0.0.1', 45 45 + port: 5179 46 46 + } 47 47 + }); 48 48 + ``` 49 49 + 50 50 + 5. install the dependencies 51 51 + 52 52 + ```bash 53 53 + npm install @atcute/oauth-browser-client @atcute/client 54 54 + ``` 55 55 + 56 56 + 6. for deployment change the `SITE_URL` variable in `src/lib/oauth/const.ts` 57 57 + (e.g. for github pages: `https://your-username.github.io`) and set your base in `svelte.config.js` 58 58 + (e.g. for github pages: `base: '/your-repo-name/'`) 59 59 + 60 60 + 39 61 ## how to use 40 62 41 63 ### login flow ··· 52 74 client.logout(); // logout the user 53 75 ``` 54 76 55 55 - LoginModal is a component that renders a login modal, add it for a quick login flow. 77 77 + LoginModal is a component that renders a login modal, add it for a quick login flow. 78 78 + (copy the `src/lib/UI` folder into your projects `src/lib` folder) 56 79 57 80 ```svelte 58 81 <script>

src/lib/oauth/UI/Button.svelte src/lib/UI/Button.svelte

+1 -1

src/lib/oauth/UI/LoginModal.svelte src/lib/UI/LoginModal.svelte

··· 7 7 </script> 8 8 9 9 <script lang="ts"> 10 10 - import { login } from '../auth.svelte'; 10 10 + import { login } from '$lib/oauth/auth.svelte'; 11 11 import Button from './Button.svelte'; 12 12 import { tick } from 'svelte'; 13 13

+2 -2

src/lib/oauth/index.ts

··· 1 1 import { client, login, logout, initClient } from './auth.svelte'; 2 2 - import LoginModal, { loginModalState } from './UI/LoginModal.svelte'; 3 3 - import Button from './UI/Button.svelte'; 2 2 + import LoginModal, { loginModalState } from '../UI/LoginModal.svelte'; 3 3 + import Button from '../UI/Button.svelte'; 4 4 import { metadata } from './const'; 5 5 6 6 export { metadata, client, login, logout, initClient, LoginModal, Button, loginModalState };