123 |
126 |
127 |
128 |
129 |
--------------------------------------------------------------------------------
/docs/src/pages/client/signIn.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Client Sign In
3 | description: Learn About Client Sign In
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | `signIn` is a function of `@astro-auth/client` that will allow you to sign in a user from the frontend. Preferably, you should use this function inside a component island.
10 |
11 | `signIn` takes one parameter which is a object that contains, `callbackURL`, `provider` and `login` properties. `callbackURL` is the route that you want to redirect the user to after signing in. `provider` is the provider that you want to use to sign in.`login` is a property that is only used when you're using the **Credentials** provider. It is the login details that you need to send over to the backend for authentications.
12 |
13 | ## Example
14 |
15 | ```js
16 | import { signIn } from "@astro-auth/client";
17 |
18 | const Login = () => {
19 | return (
20 |
21 |
31 |
32 | );
33 | };
34 |
35 | export default Login;
36 | ```
37 |
38 | In above example, we're using the **Discord** provider to sign in. If the login is successful the user will be redirected to the `/dashboard` route.
39 |
40 | > Read more about the `login` property in the **Credentials** provider.
41 |
--------------------------------------------------------------------------------
/docs/src/pages/client/signOut.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Client Sign Out
3 | description: Learn About Client Sign In
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | `signOut` is a function of `@astro-auth/client` that will allow you to sign in a user from the frontend. Preferably, you should use this function inside a component island.
10 |
11 | `signOut` takes one parameter which is the callbackURL. The callbackURL is the route that you want to redirect the user to after a successful signOut signing out.
12 |
13 | ## Example
14 |
15 | ```js
16 | import { signOut } from "@astro-auth/client";
17 |
18 | const Login = () => {
19 | return (
20 |
21 |
28 |
29 | );
30 | };
31 |
32 | export default Login;
33 | ```
34 |
35 | In above example, when user is successfully signed out, the user will be redirected to the `/` route.
36 |
--------------------------------------------------------------------------------
/docs/src/pages/client/state-store.astro:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/docs/src/pages/core/get-error.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Get Error
3 | description: Get Any Error From Server
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | When a error is happened in the backend server in a user action, backend redirects the user to the a specific page with the error message. `getError` function can be used to fetch these errors and maybe display them to the user.
10 |
11 | ```js
12 | import { getError } from "@astro-auth/core";
13 |
14 | const error = getError(Astro);
15 | ```
16 |
17 | In above snippet the error object will be the error if it exists. If it doesn't it'll be null.
18 |
--------------------------------------------------------------------------------
/docs/src/pages/core/get-user.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Get User
3 | description: Learn About Get User Function
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Introduction
8 |
9 | `getUser` is a function in the `@astro-auth/core` library that returns the user that was serialized to JWT in the `jwt` hook if a user is currently logged in. You can use the `getUser` function in your Astro frontmatter or in a API route.
10 |
11 | ### Calling `getUser` in frontmatter.
12 |
13 | Make sure to pass the `Astro` global as the client property to the function if you're using this in the frontmatter.
14 |
15 | ```js
16 | ---
17 | import { getUser } from "@astro-auth/core";
18 |
19 | const user = getUser({ client: Astro });
20 | ---
21 |
22 | ...
23 | ```
24 |
25 | ### Calling `getUser` in an API route.
26 |
27 | Make sure to pass the `request` object as the server property to the function if you're using this in the frontmatter.
28 |
29 | ```js
30 | import { getUser } from "@astro-auth/core";
31 |
32 | export const all = (_, request: Request) => {
33 | const user = getUser({ server: request });
34 | };
35 | ```
36 |
37 | Once you got the user, you can act according to the returned user. `null` will be returned if there is no user logged in.
38 |
--------------------------------------------------------------------------------
/docs/src/pages/core/redirect-user.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Redirect User
3 | description: Redirect User Based On User's Auth Status
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | Normally in `astro`, you can use `Astro.redirect` function to redirect user based on their authentication status. But in my case I found it was not working as expected. If that is the case for you, you can use the `redirectUser` function.
10 |
11 | ```js
12 | import { getUser, redirectUser } from "@astro-auth/core";
13 |
14 | const user = getUser({ client: Astro });
15 | if (!user) {
16 | return redirectUser("/");
17 | }
18 | ```
19 |
--------------------------------------------------------------------------------
/docs/src/pages/extra/database-integration.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Database Integration
3 | description: Learn How To Integrate Astro Auth With Your Favorite Database
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | In some scenarios, you will need to integrate Astro Auth with a database. That might be to store additional information about the user or store some specific information about the user.
10 |
11 | Currently Astro Auth doesn't have a out of the box solution for storing user information in a database. But you can use the [`signIn`](/hooks/sign-in) hook to store the user information in a database.
12 |
13 | ## Example
14 |
15 | ```ts
16 | import AstroAuth from "@astro-auth/core";
17 | import { GoogleProvider } from "@astro-auth/providers";
18 |
19 | export const all = AstroAuth({
20 | authProviders: [
21 | GoogleProvider({
22 | clientId: import.meta.env.GOOGLE_CLIENT_ID,
23 | clientSecret: import.meta.env.GOOGLE_CLIENT_SECRET,
24 | }),
25 | ],
26 | hooks: {
27 | // signIn hook has a argument with all the user info
28 | signIn: async (user) => {
29 | // Store the user info in a database using the user object that is returned
30 | // ....
31 | // And return true if it succeeds
32 | return true;
33 | },
34 | },
35 | });
36 | ```
37 |
38 | Here you can see the user object passed to the `signIn` hook can be used to store the user info in a database and return true if it succeeds.
39 |
40 | > Out of the box database support will be added to astro-auth soon but I think this way is even neater and more flexible.
41 |
--------------------------------------------------------------------------------
/docs/src/pages/getting-started/astro-auth-cli.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Astro Auth CLI
3 | description: Using Astro Auth CLI to Easily Setup Astro Auth
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | Normally, you would have to setup Astro Auth manually by creating a configuration file, state stores yourself. But, if you are using the CLI tool, you can use the following commands to setup Astro Auth.
8 |
9 | ### Generating A Configuration File
10 |
11 | ```bash
12 | npx @astro-auth/cli
13 | ```
14 |
15 | Using the above command, you can generate a Astro Auth configuration file in your `api/auth` folder. If your project have a `tsconfig.json` file, this new config file will be a typescript file, if not it will be a javascript file.
16 |
17 | ### Generating A State Store
18 |
19 | > If you want to learn more about state stores, look at [this](/state-store/react) section.
20 |
21 | ```bash
22 | npx @astro-auth/cli -state
23 | ```
24 |
25 | This will create the component that you will need to initialize your state store.
26 |
--------------------------------------------------------------------------------
/docs/src/pages/getting-started/getting-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Getting Started
3 | description: Getting Started With Astro Auth
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | > Astro Auth Is A Tool Kit That Consist Of 6 Packages. Two Are Mandatory While Others Are Optional and Can Be Used Or Not Based On Your Requirements.
8 |
9 | ## Basics
10 |
11 | Astro Auth consists of 5 main packages namely,
12 |
13 | 1. `@astro-auth/core` - [NPM Package](https://www.npmjs.com/package/@astro-auth/core) - This package is the core of Astro Auth. It contains all the logic and logic related to Astro Auth.
14 |
15 | 2. `@astro-auth/client` - [NPM Package](https://www.npmjs.com/package/@astro-auth/client) - This package contains all the utility functions that are used from the front matter or front end to interact with Astro Auth easily.
16 |
17 | 3. `@astro-auth/ui` (In Beta) - [NPM Package](https://www.npmjs.com/package/@astro-auth/ui) - This package contains the Astro Themed UI Elements that you can use to easily get started with Astro Auth.
18 |
19 | 4. `@astro-auth/providers` - [NPM Package](https://www.npmjs.com/package/@astro-auth/providers) - This package contains all the prebuilt auth providers that comes out of the box with Astro Auth.
20 |
21 | 5. `@astro-auth/cli` - [NPM Package](https://www.npmjs.com/package/@astro-auth/cli) - This package contains the CLI tool that you can use to get started with Astro Auth in a matter of seconds.
22 |
23 | `@astro-auth/core` and `@astro-auth/client` packages are the minimum that you require to get started with Astro Auth. Note that you can only use `@astro-auth/core` without `@astro-auth/client` but it is not the recommended way to use Astro Auth.
24 |
25 | ## Getting Started
26 |
27 | ### New Project
28 |
29 | This is the easiest way to get started. You can simply clone the example Astro Auth repository to get started. (It is highly suggested to NOT use `apps/dev` as an example because that is a development environment for the actual package)
30 |
31 | ```bash
32 | git clone https://github.com/osadavc/astro-auth-example.git
33 | ```
34 |
35 | ### Existing Project
36 |
37 | You can either setup using the **CLI tool** or you can **setup manually**.
38 |
39 | #### Setup With CLI Tool
40 |
41 | Read the [CLI Tool](/getting-started/astro-auth-cli) section to know how to setup Astro Auth using the CLI tool.
42 |
43 | #### Manual Setup
44 |
45 | 1. Install the package using the following command.
46 |
47 | ```bash
48 | npm install @astro-auth/core
49 | ```
50 |
51 | or
52 |
53 | ```bash
54 | yarn add @astro-auth/core
55 | ```
56 |
57 | 2. Create API route to handle authentication
58 |
59 | Create `[...astroauth].js` inside `src/pages/api/auth` directory and add the following starter code
60 |
61 | ```js
62 | import AstroAuth from "@astro-auth/core";
63 |
64 | export const all = AstroAuth({
65 | authProviders: [],
66 | hooks: {},
67 | });
68 | ```
69 |
70 | 3. For Astro Auth to work, you need to create to environment variables. Create a new `.env file in the root directory of your project and add the following lines.
71 |
72 | ```
73 | ASTROAUTH_URL=YOUR_BASE_URL_HERE
74 | ASTROAUTH_SECRET=YOUR_JWT_SECRET_HERE
75 | ```
76 |
77 | Make sure to replace the `YOUR_BASE_URL_HERE` with the URL that your applications is running on. For example, if your application is running on `http://localhost:3000`, then the `ASTROAUTH_URL` should be `http://localhost:3000`.
78 |
79 | Replace the `YOUR_JWT_SECRET_HERE` with a secret that you can use to sign the JWT token. You can use any string that you want. If you want to generate a random string, you can use the following command.
80 |
81 | ```bash
82 | openssl rand -base64 32
83 | ```
84 |
85 | or go to this URL and generate a random one. [Generate Secret](https://generate-secret.vercel.app/32)
86 |
87 | 4. Install a SSR adapter for Astro Auth to properly work.
88 |
89 | You have to install a Astro SSR adapter for Astro Auth to work because Astro Auth relies on SSR capabilities. You can read more about that [here](https://docs.astro.build/en/guides/server-side-rendering/).
90 |
91 | 🎉 You're all set to start using Astro Auth. To learn how to use Astro Auth to authenticate users in your project, read the [Using Astro Auth](using-astro-auth) section.
92 |
--------------------------------------------------------------------------------
/docs/src/pages/getting-started/introduction.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Introduction
3 | description: Introduction To Astro Auth
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 |
8 |
9 |
10 |
11 | ## About Astro Auth 🧑🏻🚀
12 |
13 | Astro Auth Is A Feature Complete, Developer Friendly Authentication Library For Astro. It includes a UI library with many simple components to bootstrap your app and you also have a handy CLI tool to setup a project with Astro Auth really fast.
14 |
15 | #### What Astro Auth Can Do
16 |
17 | - Supports many popular OAuth providers.
18 | - Can change or modify the shape of your JWT tokens easily.
19 | - Add any custom OAuth provider that you want to use.
20 | - Customize the default behaviour of Astro Auth via inbuilt hooks.
21 | - Use Credential provider to do ANY kind of authentication.
22 | - Get started in seconds with the CLI tool.
23 |
24 | ## Getting Started
25 |
26 | Check the [Sample App](https://github.com/osadavc/astro-auth-example) to see how easy it is to get started with Astro Auth or read the [Get Started Guide](getting-started) to learn more about Astro Auth.
27 |
28 | ## Credits
29 |
30 | Special thanks to [Next Auth](https://next-auth.js.org/). Astro Auth is highly inspired by Next Auth.
31 |
--------------------------------------------------------------------------------
/docs/src/pages/getting-started/typescript-support.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Using Typescript With Astro Auth
3 | description: Using Typescript With Astro Auth
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## TypeScript
8 |
9 | Astro Auth have TypeScript support builtin. If you are an advance user you can import the specific type declarations for the packages that you are using from the `@astro-auth/core` package.
10 |
11 | > Module augmentation is still in development and will come out quickly.
12 |
13 | ## Contribution
14 |
15 | Contributions in any way are welcome especially in Typescript support.
16 |
--------------------------------------------------------------------------------
/docs/src/pages/getting-started/using-astro-auth.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Using Astro Auth
3 | description: Using Astro Auth To Build A Login With Google
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Setup Astro Auth
8 |
9 | Read the [Getting Started](/getting-started) section to know how to setup Astro Auth.
10 |
11 | ## Building A Google Login With Astro
12 |
13 | ### 1. Setup
14 |
15 | First will install some more libraries from Astro Auth toolkit to make our lives a little bit easier. Use one of those commands to install the libraries.
16 |
17 | ```bash
18 | npm install @astro-auth/core @astro-auth/client @astro-auth/providers @astro-auth/ui
19 | ```
20 |
21 | ```bash
22 | yarn add @astro-auth/core @astro-auth/client @astro-auth/providers @astro-auth/ui
23 | ```
24 |
25 | The client package will make it a lot easier to communicate with the authentication backend. The providers package will provide us with many different **pre configured** OAuth providers. The UI package will provide us with the UI elements that we can use to build our login page. (Please note that the UI package is not mandatory and you can use it or not based on your requirements.)
26 |
27 | At this point you should have all the packages install and ready go.
28 |
29 | ### 2. Edit Astro Auth Config
30 |
31 | Go to your `src/pages/api/auth/[...astroauth].js` file and update the code as follows
32 |
33 | ```js
34 | import AstroAuth from "@astro-auth/core";
35 |
36 | //Import the providers that you need to use
37 | import { GoogleProvider } from "@astro-auth/providers";
38 |
39 | export const all = AstroAuth({
40 | authProviders: [
41 | // Configure the providers that you need to use
42 | GoogleProvider({
43 | // You will need to add your client ID and client secret to a .env file
44 | clientId: import.meta.env.GOOGLE_CLIENT_ID,
45 | clientSecret: import.meta.env.GOOGLE_CLIENT_SECRET,
46 | }),
47 | ],
48 | hooks: {},
49 | });
50 | ```
51 |
52 | > Make sure you have added `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` to your `.env` file.
53 |
54 | > When generating your Google credentials, make sure to set the redirect URL as `YOUR_DOMAIN/api/auth/oauth/google`. So if you're using local host, put the redirect URL as `http://localhost:3000/api/auth/oauth/google`. You can read more about redirect URLs in the providers section
55 |
56 | ### 3. The UI
57 |
58 | For the UI, you can use the Astro themed UI elements that we have provided.(Please note that UI components are currently in beta and it is only working with react but you can definitely use the authentication with other frameworks as well. **However you will need a UI library in order to use the authentication**)
59 |
60 | To use the UI package you need to have React configured for your Astro app. If you don't know how to configure React, please refer to the [Official Guide](https://docs.astro.build/en/core-concepts/framework-components/).
61 |
62 | The create a new component with any name that you like, in this case I am gonna name it as `Login.jsx`. Here are the contents of that file
63 |
64 | ```jsx
65 | import { GoogleButton } from "@astro-auth/ui";
66 | import { signIn } from "@astro-auth/client";
67 |
68 | const Login = () => {
69 | return (
70 |
71 | // If you are using the UI Library this is enough
72 |
73 | // If you are not using the UI Library, you will need to add the following
74 | code
75 |
85 |
86 | );
87 | };
88 |
89 | export default Login;
90 | ```
91 |
92 | Here, you can see we are importing `GoogleButton` from `@astro-auth/ui` and also we are using the `signIn` function from `@astro-auth/client` to sign in with the provider. But you won't need both of them. The signIn call is built in to the GoogleButton component. You will only need to use the `signIn` function if you **don't want to use the UI library**.
93 |
94 | We are gonna pass [this URL](https://youtu.be/dQw4w9WgXcQ) as the callback URL so once user is properly authenticated, Astro Auth will redirect the user to this URL.
95 |
96 | ### 4. Using The Components And Environment Variable Recap
97 |
98 | Make sure to import the Login component in your `.astro` page in-order to display that. Let's recap the requirements for the app before testing it.
99 |
100 | 1. You **MUST** have a `.env` file with the following keys:
101 |
102 | ```
103 | ASTROAUTH_URL=
104 | ASTROAUTH_SECRET=
105 |
106 | GOOGLE_CLIENT_ID=
107 | GOOGLE_CLIENT_SECRET=
108 | ```
109 |
110 | 2. Make sure your client id and client secret are correct. You can get them from google cloud console.
111 |
112 | ### 5. Testing
113 |
114 | Run `npm run dev` or `yarn dev` in your terminal and open `localhost:3000` in your browser. You should see a beautiful Astro like Login With Google button. Just click that and go through the process. If you did everything correct, you should be rick rolled at this point.
115 |
116 | > At this point, you should be able to use any login provider to successfully **authenticate** a user in your app. You will learn more about how to **authorize** the logged in users in the next section.
117 |
--------------------------------------------------------------------------------
/docs/src/pages/hooks/account.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Account Hook
3 | description: Learn About Account Hook
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | When user initially logs in to the application, Astro Auth will call the `jwt` hook passing everything that it receives from the provider, that is just for the single time that user logs in.
8 |
9 | `account` hook will be called passing the contents in the initially signed JWT token every time that `useUser` client hook is called in the client side.
10 |
11 | > Learn more about `useUser` client hook in the client section
12 |
13 | ## Instructions
14 |
15 | Look at the example below.
16 |
17 | ```js
18 | import AstroAuth from "@astro-auth/core";
19 | import { GoogleProvider } from "@astro-auth/providers";
20 |
21 | export const all = AstroAuth({
22 | authProviders: [
23 | GoogleProvider({
24 | clientId: import.meta.env.GOOGLE_CLIENT_ID,
25 | clientSecret: import.meta.env.GOOGLE_CLIENT_SECRET,
26 | }),
27 | ],
28 | hooks: {
29 | jwt: async (user) => {
30 | return {
31 | accessToken: user.accessToken,
32 | user: {
33 | ...user.user,
34 | originalUser: user.user.originalUser,
35 | },
36 | };
37 | },
38 | account: async (user) => {
39 | return {
40 | ...user,
41 | isGood: Math.random() >= 0.5,
42 | };
43 | },
44 | },
45 | });
46 | ```
47 |
48 | What this essentially does is add a new property to the user object called `isGood` and set it to a random boolean value every time that the user is accessed from the client side.
49 |
--------------------------------------------------------------------------------
/docs/src/pages/hooks/jwt.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: JWT Hook
3 | description: Learn About JWT Hook
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Basics
8 |
9 | Once you logged in with any provider, a brand new JWT token will be generated. This token will be stored in cookies as a HTTP only cookie. This hook will allow you to alter the contents in the token.
10 |
11 | The default JWT token will include the access token from the OAuth provider and very basic information of the user such as user ID, name, email and image. Many OAuth providers will include much more information in the token. By default Astro Auth strip out those data. But by using jwt hook, you can complete alter the contents of the token.
12 |
13 | ## Instruction
14 |
15 | Look at the example below.
16 |
17 | ```js
18 | import AstroAuth from "@astro-auth/core";
19 | import { GoogleProvider } from "@astro-auth/providers";
20 |
21 | export const all = AstroAuth({
22 | authProviders: [
23 | GoogleProvider({
24 | clientId: import.meta.env.GOOGLE_CLIENT_ID,
25 | clientSecret: import.meta.env.GOOGLE_CLIENT_SECRET,
26 | }),
27 | ],
28 | hooks: {
29 | // jwt hook has a argument with all the user info
30 | jwt: async (user) => {
31 | return {
32 | accessToken: user.accessToken,
33 | user: {
34 | ...user.user,
35 | originalUser: user.user.originalUser,
36 | },
37 | };
38 | },
39 | },
40 | });
41 | ```
42 |
43 | > You might need to check the provider with `user.provider` and response according to the provider that user is requesting if you have providers that return different data like `CredentialsProvider` or `MetamaskProvider`
44 |
45 | As you can see, you will get the `user` as a argument. You can alter the contents of the token by returning a new object. THe passed user object will look something like this
46 |
47 | ```js
48 | {
49 | accessToken: "",
50 | user: {
51 | id: "",
52 | name: "",
53 | email: "",
54 | image: "",
55 | originalUser: {
56 | id: "",
57 | name: "",
58 | email: "",
59 | image: "",
60 | ...
61 | },
62 | },
63 | }
64 | ```
65 |
66 | You get the very basic info about the user in the user sub object and you will also have a parameter called originalUser which contains the untouched user object from the OAuth provider.
67 |
68 | Using this way, you can customize the contents of the token in any way that you need.
69 |
70 | ### Customize Default Token
71 |
72 | If you want to customize the token by using the default token as a template, you can copy the default token's generating function and modify it according to your choice. Default token generating function is given below.
73 |
74 | ```js
75 | jwt: async (user) => {
76 | return {
77 | accessToken: user.accessToken,
78 | user: {
79 | ...user.user,
80 | originalUser: undefined,
81 | },
82 | };
83 | };
84 | ```
85 |
--------------------------------------------------------------------------------
/docs/src/pages/hooks/redirectError.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Redirect Error Hook
3 | description: Learn About Redirect Error Hook
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | Redirect Error hook is called with the error when any internal error is occurred in the server side. The user will be redirected to the return value of this hook.
8 |
9 | Look at the example below.
10 |
11 | ```js
12 | import AstroAuth from "@astro-auth/core";
13 | import { GoogleProvider } from "@astro-auth/providers";
14 |
15 | export const all = AstroAuth({
16 | authProviders: [
17 | GoogleProvider({
18 | clientId: import.meta.env.GOOGLE_CLIENT_ID,
19 | clientSecret: import.meta.env.GOOGLE_CLIENT_SECRET,
20 | }),
21 | ],
22 | hooks: {
23 | redirectError: async (error) => {
24 | console.log(error.message);
25 | return "/";
26 | },
27 | },
28 | });
29 | ```
30 |
31 | Here, what is essentially happening is that whenever an error is thrown in the server side, the error message will be logged to the console and the user will be redirected to the `/` route with the error as a query parameter.
32 |
--------------------------------------------------------------------------------
/docs/src/pages/hooks/sign-in.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Sign In Hook
3 | description: Learn About Sign In Hook
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Basics
8 |
9 | Once you login with any provider this is the first place that Astro Auth library will look in to. You can decide whether a user should be able to login or not with this hook.
10 |
11 | ## Instructions
12 |
13 | Look at the example below.
14 |
15 | ```js
16 | import AstroAuth from "@astro-auth/core";
17 | import { GoogleProvider } from "@astro-auth/providers";
18 |
19 | export const all = AstroAuth({
20 | authProviders: [
21 | GoogleProvider({
22 | clientId: import.meta.env.GOOGLE_CLIENT_ID,
23 | clientSecret: import.meta.env.GOOGLE_CLIENT_SECRET,
24 | }),
25 | ],
26 | hooks: {
27 | // signIn hook has a argument with all the user info
28 | signIn: async (user) => {
29 | return true;
30 | },
31 | },
32 | });
33 | ```
34 |
35 | As you can see, you will get the `user` as a argument. You can decide whether that particular user should be able to login or not by returning a boolean or string.
36 |
37 | There are few data types that you can return from this hook.
38 |
39 | 1. Truthy value - This will allow the user to login.
40 | 2. Falsy value - This will prevent the user from logging in.
41 | 3. String - This will **NOT** allow user to login. Once user tries to login, he will be redirected to the string that is returned here.
42 |
43 | > As of now once you logged in with the `CredentialProvider`, this hook will **NOT** will be called. but this might change in the near future.
44 |
--------------------------------------------------------------------------------
/docs/src/pages/index.astro:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/docs/src/pages/providers/credentials.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Credentials Provider
3 | description: Learn How To Use Credentials Provider
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | Optionally, you can use `CredentialsProvider` to authenticate with your custom backend server. In your `signIn` function, you can pass the `provider` parameter as `credentials` and pass the data required to authenticate in the backend server to the `login` object in the `signIn` function.
10 |
11 | ```ts
12 | import AstroAuth from "@astro-auth/core";
13 | // Import the Credential provider(s)
14 | import { CredentialProvider } from "@astro-auth/providers";
15 |
16 | export const all = AstroAuth({
17 | authProviders: [
18 | CredentialProvider({
19 | // Here, we are simply checking if the email matches and allow the user to login
20 | authorize: async (properties) => {
21 | if (properties.email == "osadavidath@gmail.com") {
22 | return properties;
23 | }
24 |
25 | return null;
26 | },
27 | }),
28 | ],
29 | });
30 | ```
31 |
32 | Configure the authorize function to handle the authentication process. (the parameter that is passed in will contain all the data you passed to the login function) The function should return the user properties if the user is authenticated or `null` if the user is not authenticated.
33 |
34 | Call the function from the frontend as follows,
35 |
36 | ```ts
37 | import { signIn } from "@astro-auth/client";
38 |
39 | const signInWithEmailAndPassword = () => {
40 | signIn({
41 | provider: "credential",
42 | login: {
43 | email: "PASS_FROM_INPUT",
44 | password: "PASS_FROM_INPUT",
45 | },
46 | });
47 | };
48 | ```
49 |
--------------------------------------------------------------------------------
/docs/src/pages/providers/metamask.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Metamask Provider
3 | description: Learn How To Use Metamask Provider
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | Optionally, you can use `Metamask Provider` to do a web3 login. This will sign a message with your private key and validate when a user make a sign in request. In your `signIn` function, you can pass the `provider` parameter as `metamask`.
10 |
11 | ```ts
12 | import AstroAuth from "@astro-auth/core";
13 | // Import the Credential provider(s)
14 | import { MetamaskProvider } from "@astro-auth/providers";
15 |
16 | export const all = AstroAuth({
17 | authProviders: [
18 | Metamask({
19 | // Here, we are specifying what properties should be in the JWT. In this case, I am gonna pass them all.
20 | authorize: async (properties) => properties,
21 | // This is the message that will be signed and validated in the backend.
22 | signMessage: "Hello From Astro Auth",
23 | }),
24 | ],
25 | });
26 | ```
27 |
28 | Configure the authorize function to handle the authentication process. (the parameter that is passed in will contain all the address and signed string) The function should return the user properties if the user is authenticated or `null` if the user should not be authenticated.
29 |
30 | Call the function from the frontend as follows,
31 |
32 | ```ts
33 | import { signIn } from "@astro-auth/client";
34 |
35 | const signInWithEmailAndPassword = () => {
36 | signIn({
37 | provider: "metamask",
38 | });
39 | };
40 | ```
41 |
42 | > If user have not installed metamask,the `signIn` function will return an error.
43 |
--------------------------------------------------------------------------------
/docs/src/pages/providers/oauth.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: OAuth Providers
3 | description: Learn How To Use OAuth Providers
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | OAuth providers will probably be the most common reason for developers to use Astro Auth. Astro Auth supports PKCE security mechanism as well.
10 |
11 | ## Authorized redirect URIs
12 |
13 | The "Authorized redirect URIs" must be configured on your OAuth provider's console.
14 |
15 | - For production: https://{YOUR_DOMAIN}/api/auth/oauth/{PROVIDER}
16 | - For development: http://localhost:3000/api/auth/oauth/{PROVIDER}
17 |
18 | ## OAuth Providers
19 |
20 | Inside the `@astro-auth/provider` package, you will find 8 OAuth providers including their own UI components in the `@astro-auth/ui` package. Here is the list of OAuth providers:
21 |
22 | 1. GoogleProvider
23 | 2. DiscordProvider
24 | 3. TwitterProvider
25 | 4. FacebookProvider
26 | 5. GithubProvider
27 | 6. InstagramProvider
28 | 7. SpotifyProvider
29 | 8. ZoomProvider
30 |
31 | ## Example For Using Github OAuth
32 |
33 | src/pages/api/auth/[...astroauth].ts
34 |
35 | ```ts
36 | import AstroAuth from "@astro-auth/core";
37 | // Import the OAuth provider(s)
38 | import { GithubProvider } from "@astro-auth/providers";
39 |
40 | export const all = AstroAuth({
41 | authProviders: [
42 | // Configure Your OAuth Providers With Proper Client ID And Secret and optionally the scopes you want to access
43 | GithubProvider({
44 | clientId: "YOUR_BEAUTIFUL_CLIENT_ID_HERE",
45 | clientSecret: "YOUR_SUPER_SECRET_CLIENT_SECRET_HERE",
46 | scope: ["identify", "email"],
47 | }),
48 | ],
49 | });
50 | ```
51 |
52 | and in the front end portion, you can use `signIn` function from `@astro-auth/client` any specific UI component like `GithubButton` from `@astro-auth/ui`.
53 |
54 | To use the `signIn` function, you need to pass the `provider` parameter.
55 |
56 | ```ts
57 | import { signIn } from "@astro-auth/client";
58 |
59 | const signInWithGithub = () => {
60 | signIn({
61 | provider: "github",
62 | });
63 | };
64 | ```
65 |
66 | or there is a corresponding UI button for every single OAuth Provider.
67 |
68 | ```tsx
69 | import { GithubButton } from "@astro-auth/ui";
70 |
71 | const Login = () => {
72 | return (
73 |
74 |
75 |
76 | );
77 | };
78 |
79 | export default Login;
80 | ```
81 |
--------------------------------------------------------------------------------
/docs/src/pages/state-store/other-frameworks.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Using User State Inside Other Frameworks
3 | description: Learn How To Consume User State Inside Of Frameworks Other Than React
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | At the moment, in frameworks other than react, there is no way to preserve the state inside of the application, so you have to fetch the user from the server every time. Here is how you do it in vue.
10 |
11 | ```html
12 |
26 |
27 |
28 |
{{JSON.stringify(user)}}
29 |
30 | ```
31 |
32 | You can use the same method to do the same thing in other frameworks.
33 |
34 | > **DO NOT USE THIS METHOD IN REACT.**
35 |
--------------------------------------------------------------------------------
/docs/src/pages/state-store/react.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Using User State Inside Of React Components
3 | description: Learn How To Consume User State Inside React Components
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ## Instructions
8 |
9 | Normally when you consume logged in user's state in a component, you have to drill props with the user from the server side. But by using what is so called `state store`, you don't have to. (This feature is experimental and works best with react, other frameworks are supported too.)
10 |
11 | First, run this command in the terminal to generate a state store:
12 |
13 | ```bash
14 | npx @astro-auth/cli -state
15 | ```
16 |
17 | Then you have to use that component in each and every page you want to consume the user state.
18 |
19 | ```js
20 |
21 | ---
22 | import { getUser } from "@astro-auth/core";
23 | import UserStore from "../components/UserStore";
24 |
25 | const user = getUser();
26 | ---
27 |
28 |
29 |
30 |
31 |
32 | Astro
33 |
34 |
35 |
36 |
37 |
38 |
39 | ```
40 |
41 | What this will ultimately do is, it'll store the user in a state store, and then you can use the state in a React Component like that.
42 |
43 | ```jsx
44 | import { ReactStateStore } from "@astro-auth/client";
45 |
46 | const ReactComponent = () => {
47 | const user = ReactStateStore.useUser({ update: true });
48 |
49 | return ;
50 | };
51 |
52 | export default ReactComponent;
53 | ```
54 |
55 | You can call the `useUser` hook with `update: true` to fetch a fresh user by passing the old user through the `account` hook. If you don't want to update the user, you can pass `update: false` or not pass anything at all and the user in the state store will be returned.
56 |
57 | > Check [other](/state-store/other-frameworks) frameworks section to know how to access user state from other frameworks.
58 |
--------------------------------------------------------------------------------
/docs/src/pages/ui-library/button.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Button Component
3 | description: Learn About Button Component
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | Button is a component that is included in the `@astro-auth/ui` library and it looks exactly similar to the buttons in the [astro.build](https://astro.build) official website.
8 |
9 | You can use the button like this,
10 |
11 | ```jsx
12 | import { Button } from "@astro-auth/ui";
13 |
14 | const ButtonSection = () => {
15 | return ;
16 | };
17 | ```
18 |
--------------------------------------------------------------------------------
/docs/src/pages/ui-library/instructions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Instruction
3 | description: Instruction to use the UI library
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | ### Introduction
8 |
9 | Install `@astro-auth/ui` package to use the UI library.
10 |
11 | > Before proceeding, please note that the UI library is still in beta and only works with react.
12 |
13 | To load the the stylesheets and font properly, you need to modify your `astro.config.mjs` file like this,
14 |
15 | ```js
16 | import { defineConfig } from "astro/config";
17 | import vercel from "@astrojs/vercel/serverless";
18 | import { astroAuthComponents } from "@astro-auth/ui";
19 |
20 | export default defineConfig({
21 | integrations: [react(), astroAuthComponents()],
22 | adapter: vercel(),
23 | experimental: {
24 | integrations: true,
25 | },
26 | });
27 | ```
28 |
29 | You will need react and astroAuthComponents as integrations and experimental.integrations to be enabled.
30 |
--------------------------------------------------------------------------------
/docs/src/pages/ui-library/provider-buttons.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Provider Button Components
3 | description: Learn About Provider Button Components
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | Provider Buttons are components that are included in the `@astro-auth/ui` library and the button looks exactly similar to the Buttons in the [astro.build](https://astro.build) official website. You have each Provider Button for each provider that is included in the `@astro-auth/providers` library.
8 |
9 | You can use the Google button like this,
10 |
11 | ```jsx
12 | import { GoogleButton } from "@astro-auth/ui";
13 |
14 | const ProviderButtonSection = () => {
15 | return ;
16 | };
17 | ```
18 |
19 | Provider Buttons takes 3 optional props
20 |
21 | 1. `onClick`: Function that is called when the button is clicked. Defaults to the login function.
22 | 2. `callback`: The route that user will be redirected in a successful login attempt. Defaults to `/`.
23 | 3. `children`: The text that is displayed on the button. Defaults to the provider name.
24 |
25 | > Read more about provider buttons in the each provider page of the documentation.
26 |
--------------------------------------------------------------------------------
/docs/src/pages/ui-library/title.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Title Component
3 | description: Learn About Title Component
4 | layout: ../../layouts/MainLayout.astro
5 | ---
6 |
7 | Title is a component that is included in the `@astro-auth/ui` library and it looks exactly similar to the title text in the [astro.build](https://astro.build) official website.
8 |
9 | You can use the title like this,
10 |
11 | ```jsx
12 | import { Title } from "@astro-auth/ui";
13 |
14 | const TitleSection = () => {
15 | return Click Me;
16 | };
17 | ```
18 |
--------------------------------------------------------------------------------
/docs/src/styles/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | margin: 0;
4 | }
5 |
6 | /* Global focus outline reset */
7 | *:focus:not(:focus-visible) {
8 | outline: none;
9 | }
10 |
11 | :root {
12 | --user-font-scale: 1rem - 16px;
13 | --max-width: calc(100% - 1rem);
14 | }
15 |
16 | @media (min-width: 50em) {
17 | :root {
18 | --max-width: 46em;
19 | }
20 | }
21 |
22 | body {
23 | display: flex;
24 | flex-direction: column;
25 | min-height: 100vh;
26 | font-family: var(--font-body);
27 | font-size: 1rem;
28 | font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
29 | line-height: 1.5;
30 | max-width: 100vw;
31 | overflow-x: hidden;
32 | overflow-y: overlay;
33 | }
34 |
35 | ::-webkit-scrollbar {
36 | width: 16px;
37 | background-color: transparent;
38 | }
39 |
40 | ::-webkit-scrollbar-thumb {
41 | border: 5px solid rgba(0, 0, 0, 0);
42 | background-clip: padding-box;
43 | border-radius: 9999px;
44 | background-color: #555;
45 | }
46 | ::-webkit-scrollbar-thumb:hover {
47 | border: 5px solid rgba(0, 0, 0, 0);
48 | background-clip: padding-box;
49 | border-radius: 9999px;
50 | background-color: #aaaaaa;
51 | }
52 |
53 | nav ul {
54 | list-style: none;
55 | padding: 0;
56 | }
57 |
58 | .content > section > * + * {
59 | margin-top: 1.25rem;
60 | }
61 |
62 | .content > section > :first-child {
63 | margin-top: 0;
64 | }
65 |
66 | /* Typography */
67 | h1,
68 | h2,
69 | h3,
70 | h4,
71 | h5,
72 | h6 {
73 | margin-bottom: 1rem;
74 | font-weight: bold;
75 | line-height: 1;
76 | }
77 |
78 | h1,
79 | h2 {
80 | max-width: 40ch;
81 | }
82 |
83 | :is(h2, h3):not(:first-child) {
84 | margin-top: 3rem;
85 | }
86 |
87 | :is(h4, h5, h6):not(:first-child) {
88 | margin-top: 2rem;
89 | }
90 |
91 | h1 {
92 | font-size: 3.25rem;
93 | font-weight: 800;
94 | }
95 |
96 | h2 {
97 | font-size: 2.5rem;
98 | }
99 |
100 | h3 {
101 | font-size: 1.75rem;
102 | }
103 |
104 | h4 {
105 | font-size: 1.3rem;
106 | }
107 |
108 | h5 {
109 | font-size: 1rem;
110 | }
111 |
112 | p {
113 | line-height: 1.65em;
114 | }
115 |
116 | .content ul {
117 | line-height: 1.1em;
118 | }
119 |
120 | p,
121 | .content ul {
122 | color: var(--theme-text-light);
123 | }
124 |
125 | small,
126 | .text_small {
127 | font-size: 0.833rem;
128 | }
129 |
130 | a {
131 | color: var(--theme-text-accent);
132 | font-weight: 400;
133 | text-underline-offset: 0.08em;
134 | align-items: center;
135 | gap: 0.5rem;
136 | }
137 |
138 | article > section :is(ul, ol) > * + * {
139 | margin-top: 0.75rem;
140 | }
141 |
142 | article > section nav :is(ul, ol) > * + * {
143 | margin-top: inherit;
144 | }
145 |
146 | article > section li > :is(p, pre, blockquote):not(:first-child) {
147 | margin-top: 1rem;
148 | }
149 |
150 | article > section :is(ul, ol) {
151 | padding-left: 1em;
152 | }
153 |
154 | article > section nav :is(ul, ol) {
155 | padding-left: inherit;
156 | }
157 |
158 | article > section nav {
159 | margin-top: 1rem;
160 | margin-bottom: 2rem;
161 | }
162 |
163 | article > section ::marker {
164 | font-weight: bold;
165 | color: var(--theme-text-light);
166 | }
167 |
168 | article > section iframe {
169 | width: 100%;
170 | height: auto;
171 | aspect-ratio: 16 / 9;
172 | }
173 |
174 | a > code {
175 | position: relative;
176 | color: var(--theme-text-accent);
177 | background: transparent;
178 | text-underline-offset: var(--padding-block);
179 | }
180 |
181 | a > code::before {
182 | content: '';
183 | position: absolute;
184 | top: 0;
185 | right: 0;
186 | bottom: 0;
187 | left: 0;
188 | display: block;
189 | background: var(--theme-accent);
190 | opacity: var(--theme-accent-opacity);
191 | border-radius: var(--border-radius);
192 | }
193 |
194 | a:hover,
195 | a:focus {
196 | text-decoration: underline;
197 | }
198 |
199 | a:focus {
200 | outline: 2px solid currentColor;
201 | outline-offset: 0.25em;
202 | }
203 |
204 | strong {
205 | font-weight: 600;
206 | color: inherit;
207 | }
208 |
209 | /* Supporting Content */
210 |
211 | code {
212 | --border-radius: 3px;
213 | --padding-block: 0.2rem;
214 | --padding-inline: 0.33rem;
215 |
216 | font-family: var(--font-mono);
217 | font-size: 0.85em;
218 | color: inherit;
219 | background-color: var(--theme-code-inline-bg);
220 | padding: var(--padding-block) var(--padding-inline);
221 | margin: calc(var(--padding-block) * -1) -0.125em;
222 | border-radius: var(--border-radius);
223 | word-break: break-word;
224 | }
225 |
226 | pre.astro-code > code {
227 | all: unset;
228 | }
229 |
230 | pre > code {
231 | font-size: 1em;
232 | }
233 |
234 | table,
235 | pre {
236 | position: relative;
237 | --padding-block: 1rem;
238 | --padding-inline: 2rem;
239 | padding: var(--padding-block) var(--padding-inline);
240 | padding-right: calc(var(--padding-inline) * 2);
241 | margin-left: calc(var(--padding-inline) * -1);
242 | margin-right: calc(var(--padding-inline) * -1);
243 | font-family: var(--font-mono);
244 |
245 | line-height: 1.5;
246 | font-size: 0.85em;
247 | overflow-y: hidden;
248 | overflow-x: auto;
249 | }
250 |
251 | table {
252 | width: 100%;
253 | padding: var(--padding-block) 0;
254 | margin: 0;
255 | border-collapse: collapse;
256 | }
257 |
258 | /* Zebra striping */
259 | tr:nth-of-type(odd) {
260 | background: var(--theme-bg-hover);
261 | }
262 | th {
263 | background: var(--color-black);
264 | color: var(--theme-color);
265 | font-weight: bold;
266 | }
267 | td,
268 | th {
269 | padding: 6px;
270 | text-align: left;
271 | }
272 |
273 | pre {
274 | background-color: var(--theme-code-bg);
275 | color: var(--theme-code-text);
276 | }
277 |
278 | blockquote code {
279 | background-color: var(--theme-bg);
280 | }
281 |
282 | @media (min-width: 37.75em) {
283 | pre {
284 | --padding-inline: 1.25rem;
285 | border-radius: 8px;
286 | margin-left: 0;
287 | margin-right: 0;
288 | }
289 | }
290 |
291 | blockquote {
292 | margin: 2rem 0;
293 | padding: 1.25em 1.5rem;
294 | border-left: 3px solid var(--theme-text-light);
295 | background-color: var(--theme-bg-offset);
296 | border-radius: 0 0.25rem 0.25rem 0;
297 | line-height: 1.7;
298 | }
299 |
300 | img {
301 | max-width: 100%;
302 | }
303 |
304 | .flex {
305 | display: flex;
306 | align-items: center;
307 | }
308 |
309 | button {
310 | display: flex;
311 | align-items: center;
312 | justify-items: center;
313 | gap: 0.25em;
314 | padding: 0.33em 0.67em;
315 | border: 0;
316 | background: var(--theme-bg);
317 | display: flex;
318 | font-size: 1rem;
319 | align-items: center;
320 | gap: 0.25em;
321 | border-radius: 99em;
322 | color: var(--theme-text);
323 | background-color: var(--theme-bg);
324 | }
325 |
326 | h2.heading {
327 | font-size: 1rem;
328 | font-weight: 700;
329 | padding: 0.1rem 1rem;
330 | text-transform: uppercase;
331 | margin-bottom: 0.5rem;
332 | }
333 |
334 | .header-link {
335 | font-size: 1rem;
336 | padding: 0.1rem 0 0.1rem 1rem;
337 | border-left: 4px solid var(--theme-divider);
338 | }
339 |
340 | .header-link:hover,
341 | .header-link:focus {
342 | border-left-color: var(--theme-accent);
343 | color: var(--theme-accent);
344 | }
345 | .header-link:focus-within {
346 | color: var(--theme-text-light);
347 | border-left-color: hsla(var(--color-gray-40), 1);
348 | }
349 | .header-link svg {
350 | opacity: 0.6;
351 | }
352 | .header-link:hover svg {
353 | opacity: 0.8;
354 | }
355 | .header-link a {
356 | display: inline-flex;
357 | gap: 0.5em;
358 | width: 100%;
359 | padding: 0.15em 0 0.15em 0;
360 | }
361 |
362 | .header-link.depth-3 {
363 | padding-left: 2rem;
364 | }
365 | .header-link.depth-4 {
366 | padding-left: 3rem;
367 | }
368 |
369 | .header-link a {
370 | font: inherit;
371 | color: inherit;
372 | text-decoration: none;
373 | }
374 |
375 | /* Screenreader Only Text */
376 | .sr-only {
377 | position: absolute;
378 | width: 1px;
379 | height: 1px;
380 | padding: 0;
381 | margin: -1px;
382 | overflow: hidden;
383 | clip: rect(0, 0, 0, 0);
384 | white-space: nowrap;
385 | border-width: 0;
386 | }
387 |
388 | .focus\:not-sr-only:focus,
389 | .focus\:not-sr-only:focus-visible {
390 | position: static;
391 | width: auto;
392 | height: auto;
393 | padding: 0;
394 | margin: 0;
395 | overflow: visible;
396 | clip: auto;
397 | white-space: normal;
398 | }
399 |
400 | :target {
401 | scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem;
402 | }
403 |
--------------------------------------------------------------------------------
/docs/src/styles/theme.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap");
2 |
3 | :root {
4 | --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
5 | sans-serif, Apple Color Emoji, Segoe UI Emoji;
6 | --font-body: "Inter", var(--font-fallback);
7 | --font-mono: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono",
8 | "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono",
9 | "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco,
10 | "Courier New", Courier, monospace;
11 |
12 | /*
13 | * Variables with --color-base prefix define
14 | * the hue, and saturation values to be used for
15 | * hsla colors.
16 | *
17 | * ex:
18 | *
19 | * --color-base-{color}: {hue}, {saturation};
20 | *
21 | */
22 |
23 | --color-base-white: 0, 0%;
24 | --color-base-black: 240, 100%;
25 | --color-base-gray: 215, 14%;
26 | --color-base-blue: 212, 100%;
27 | --color-base-blue-dark: 212, 72%;
28 | --color-base-green: 158, 79%;
29 | --color-base-orange: 22, 100%;
30 | --color-base-purple: 269, 79%;
31 | --color-base-red: 351, 100%;
32 | --color-base-yellow: 41, 100%;
33 |
34 | /*
35 | * Color palettes are made using --color-base
36 | * variables, along with a lightness value to
37 | * define different variants.
38 | *
39 | */
40 |
41 | --color-gray-5: var(--color-base-gray), 5%;
42 | --color-gray-10: var(--color-base-gray), 10%;
43 | --color-gray-20: var(--color-base-gray), 20%;
44 | --color-gray-30: var(--color-base-gray), 30%;
45 | --color-gray-40: var(--color-base-gray), 40%;
46 | --color-gray-50: var(--color-base-gray), 50%;
47 | --color-gray-60: var(--color-base-gray), 60%;
48 | --color-gray-70: var(--color-base-gray), 70%;
49 | --color-gray-80: var(--color-base-gray), 80%;
50 | --color-gray-90: var(--color-base-gray), 90%;
51 | --color-gray-95: var(--color-base-gray), 95%;
52 |
53 | --color-blue: var(--color-base-blue), 61%;
54 | --color-blue-dark: var(--color-base-blue-dark), 39%;
55 | --color-green: var(--color-base-green), 42%;
56 | --color-orange: var(--color-base-orange), 50%;
57 | --color-purple: var(--color-base-purple), 54%;
58 | --color-red: var(--color-base-red), 54%;
59 | --color-yellow: var(--color-base-yellow), 59%;
60 | }
61 |
62 | :root {
63 | color-scheme: light;
64 | --theme-accent: hsla(var(--color-blue), 1);
65 | --theme-text-accent: hsla(var(--color-blue), 1);
66 | --theme-accent-opacity: 0.15;
67 | --theme-divider: hsla(var(--color-gray-95), 1);
68 | --theme-text: hsla(var(--color-gray-10), 1);
69 | --theme-text-light: hsla(var(--color-gray-40), 1);
70 | /* @@@: not used anywhere */
71 | --theme-text-lighter: hsla(var(--color-gray-80), 1);
72 | --theme-bg: hsla(var(--color-base-white), 100%, 1);
73 | --theme-bg-hover: hsla(var(--color-gray-95), 1);
74 | --theme-bg-offset: hsla(var(--color-gray-90), 1);
75 | --theme-bg-accent: hsla(var(--color-blue), var(--theme-accent-opacity));
76 | --theme-code-inline-bg: hsla(var(--color-gray-95), 1);
77 | --theme-code-inline-text: var(--theme-text);
78 | --theme-code-bg: hsla(217, 19%, 27%, 1);
79 | --theme-code-text: hsla(var(--color-gray-95), 1);
80 | --theme-navbar-bg: hsla(var(--color-base-white), 100%, 1);
81 | --theme-navbar-height: 6rem;
82 | --theme-selection-color: hsla(var(--color-blue), 1);
83 | --theme-selection-bg: hsla(var(--color-blue), var(--theme-accent-opacity));
84 | }
85 |
86 | body {
87 | background: var(--theme-bg);
88 | color: var(--theme-text);
89 | }
90 |
91 | :root.theme-dark {
92 | color-scheme: dark;
93 | --theme-accent-opacity: 0.15;
94 | --theme-accent: hsla(var(--color-blue), 1);
95 | --theme-text-accent: hsla(var(--color-blue), 1);
96 | --theme-divider: hsla(var(--color-gray-10), 1);
97 | --theme-text: hsla(var(--color-gray-90), 1);
98 | --theme-text-light: hsla(var(--color-gray-80), 1);
99 |
100 | /* @@@: not used anywhere */
101 | --theme-text-lighter: hsla(var(--color-gray-40), 1);
102 | --theme-bg: rgb(0, 0, 0);
103 | --theme-bg-hover: hsla(var(--color-gray-40), 1);
104 | --theme-bg-offset: hsla(var(--color-gray-5), 1);
105 | --theme-code-inline-bg: hsla(var(--color-gray-10), 1);
106 | --theme-code-inline-text: hsla(var(--color-base-white), 100%, 1);
107 | --theme-code-bg: hsla(var(--color-gray-5), 1);
108 | --theme-code-text: hsla(var(--color-base-white), 100%, 1);
109 | --theme-navbar-bg: rgb(14, 14, 14)
110 | --theme-selection-color: hsla(var(--color-base-white), 100%, 1);
111 | --theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
112 |
113 | /* DocSearch [Algolia] */
114 | --docsearch-modal-background: var(--theme-bg);
115 | --docsearch-searchbox-focus-background: var(--theme-divider);
116 | --docsearch-footer-background: var(--theme-divider);
117 | --docsearch-text-color: var(--theme-text);
118 | --docsearch-hit-background: var(--theme-divider);
119 | --docsearch-hit-shadow: none;
120 | --docsearch-hit-color: var(--theme-text);
121 | --docsearch-footer-shadow: inset 0 2px 10px #000;
122 | --docsearch-modal-shadow: inset 0 0 8px #000;
123 | }
124 |
125 | ::selection {
126 | color: var(--theme-selection-color);
127 | background-color: var(--theme-selection-bg);
128 | }
129 |
--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2020",
4 | "module": "esnext",
5 | "jsx": "preserve",
6 | "moduleResolution": "node"
7 | },
8 | "moduleResolution": "node"
9 | }
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "workspaces": [
4 | "packages/*",
5 | "apps/dev",
6 | "docs"
7 | ],
8 | "scripts": {
9 | "dev:packages": "concurrently \"cd packages/astro-auth-client && yarn dev\" \"cd packages/astro-auth-core && yarn dev\" \"cd packages/astro-auth-providers && yarn dev\" \"cd packages/astro-auth-ui && yarn dev\" ",
10 | "build:packages": "concurrently \"cd packages/astro-auth-client && yarn build\" \"cd packages/astro-auth-core && yarn build\" \"cd packages/astro-auth-providers && yarn build\" \"cd packages/astro-auth-ui && yarn build\" ",
11 | "publish:packages": "concurrently \"cd packages/astro-auth-client && npm publish\" \"cd packages/astro-auth-core && npm publish\" \"cd packages/astro-auth-providers && npm publish\" \"cd packages/astro-auth-ui && npm publish\" "
12 | },
13 | "dependencies": {
14 | "concurrently": "^7.1.0"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/astro-auth-cli/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 | 
69 |
70 | 
9 |