srizan/archived-next-auth
1
0
Fork 0
mirror of https://github.com/SrIzan10/next-auth.git synced 2026-05-01 10:55:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add _meta.json for all sidebar categories and start adding Callouts

Browse Source
This commit is contained in:
ndom91
2023-02-18 18:12:56 +01:00
parent 2fab7d4cd1
commit d5eade5ef4
24 changed files with 755 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs-nextra/package.json
View File

@@ -13,6 +13,7 @@
"author": "ndom91 <yo@ndo.dev> (https://ndo.dev/)",
"license": "MIT",
"dependencies": {
"@codesandbox/sandpack-react": "^2.0.6",
"framer-motion": "^8.4.3",
"next": "13.1.1",
"nextra": "^2.2.5",

15
docs-nextra/pages/_meta.json
View File

@@ -2,12 +2,12 @@
"docs": {
"title": "Docs",
"type": "page",
"href": "https://google.com"
"href": "/getting-started/introduction"
},
"frameworks": {
"title": "Frameworks",
"type": "page",
"href": "https://react.org"
"href": "/reference"
},
"index": {
"title": "Home",
@@ -19,5 +19,14 @@
"getting-started": "Getting Started",
"guides": "Guides",
"reference": "Reference",
"concepts": "Concepts"
"concepts": "Concepts",
"--": {
"type": "separator"
},
"contributors": "Contributors",
"github-link": {
"title": "Auth.js Repo",
"href": "https://github.com/nextauthjs/next-auth",
"newWindow": true
}
}

4
docs-nextra/pages/concepts/_meta.json Normal file
View File

@@ -0,0 +1,4 @@
{
"faq": "FAQ",
"oauth": "OAuth"
}

12
docs-nextra/pages/getting-started/_meta.json Normal file
View File

@@ -0,0 +1,12 @@
{
"credentials-tutorial": "Credentials Authentication",
"databases": "Databases",
"email-tutorial": "Email Authentication",
"introduction": "Introduction",
"oauth-tutorial": "OAuth Authentication",
"typescript": "Typescript",
"security": "Security",
"img": {
"display": "hidden"
}
}

16
docs-nextra/pages/getting-started/credentials-tutorial.mdx
View File

@@ -1,7 +1,9 @@
---
title: Credentials authentication
title: Credentials Authentication
---
import { Callout } from 'nextra-theme-docs'
Auth.js is built in a way that is flexible to integrate it with any authentication back-end you or your company may already have.
This library has been designed to handle the user session client-wise, to support multiple authentication methods (OAuth, Email, etc...) so that you're not forced to run your own authentication service.
@@ -10,9 +12,9 @@ In case you already have an authentication service, you can use the Credentials
For this tutorial, we're going to use [Auth.js example app](https://github.com/nextauthjs/next-auth-example) as a base.
:::warning
<Callout type="warning">
The functionality provided for credentials based authentication is intentionally limited to discourage use of passwords due to the inherent security risks associated with them and the additional complexity associated with supporting usernames and passwords.
:::
</Callout>
Integrating the Credentials Provider is as simple as initializing it in the Auth.js configuration file:
@@ -45,12 +47,12 @@ export default NextAuth({
})
```
:::note
<Callout type="info">
Check the [Credentials Provider options](/reference/providers/credentials) for further customization
:::
</Callout>
Note that we only need to define an `authorize` method that is in charge of receiving the credentials inserted by the user and call the authorization service.
:::info
<Callout type="info">
If you're using TypeScript, you can [augment the `User` interface](/getting-started/typescript#module-augmentation) to match the response of your `authorize` callback, so whenever you read the user in other callbacks (like the `jwt`) the type will match correctly.
:::
</Callout>

18
docs-nextra/pages/getting-started/databases.md
View File

@@ -1,18 +0,0 @@
---
title: Databases
---
Auth.js offers multiple database adapters. Check our guides on:
- [using a database adapter](/guides/adapters/using-a-database-adapter)
- [creating your own](/guides/adapters/creating-a-database-adapter)
> As of **v4** Auth.js no longer ships with an adapter included by default. If you would like to persist any information, you need to install one of the many available adapters yourself. See the individual adapter documentation pages for more details.
To learn more about databases in Auth.js and how they are used, check out [databases in the FAQ](/concepts/faq#databases).
---
## How to use a database
See the [documentation for adapters](/reference/adapters/overview) for more information on advanced configuration, including how to use Auth.js with other databases using a [custom adapter](/guides/adapters/creating-a-database-adapter).

22
docs-nextra/pages/getting-started/databases.mdx Normal file
View File

@@ -0,0 +1,22 @@
---
title: Databasess
---
import { Callout } from 'nextra-theme-docs'
Auth.js offers multiple database adapters. Check our guides on:
- [Using an existing database adapter](/guides/adapters/using-a-database-adapter)
- [Creating your own](/guides/adapters/creating-a-database-adapter)
<Callout type="info">
As of **v4** Auth.js no longer ships with an adapter included by default. If you would like to persist any information, you need to install one of the many available adapters yourself. See the individual adapter documentation pages for more details.
</Callout>
To learn more about databases in Auth.js and how they are used, check out [databases in the FAQ](/concepts/faq#databases).
---
## How to use a database
See the [documentation for adapters](/reference/adapters/overview) for more information on advanced configuration, including how to use Auth.js with other databases using a [custom adapter](/guides/adapters/creating-a-database-adapter).

45
docs-nextra/pages/getting-started/email-tutorial.mdx
View File

@@ -2,6 +2,9 @@
title: Email authentication
---
import { Callout } from "nextra-theme-docs"
import Image from "next/image"
import smtpConfig from "./img/dashboard-smtp.png"
import startPageImg from "./img/email-tutorial-start.png"
import checkPageImg from "./img/email-tutorial-check.png"
@@ -18,9 +21,12 @@ The Email provider can be used in conjunction with (or instead of) one or more O
On initial sign in, a **Verification Token** is sent to the email address provided. By default this token **is valid for 24 hours**. If the Verification Token is used within that time (i.e. by clicking on the link in the email) an account is created for the user and they are signed in.
:::tip
The Email Provider can be used with both JSON Web Tokens and database sessions, but you [must configure a database adapter](/guides/adapters/using-a-database-adapter) to use it. It is not possible to enable email sign in without using a database.
:::
<Callout>
The Email Provider can be used with both JSON Web Tokens and database
sessions, but you [must configure a database
adapter](/guides/adapters/using-a-database-adapter) to use it. It is not
possible to enable email sign in without using a database.
</Callout>
## 1. Installing `nodemailer`
@@ -36,13 +42,14 @@ npm install -D nodemailer
Next we need a [SMTP service](https://sendgrid.com/blog/what-is-an-smtp-server/) which will be in charge of sending emails from our application. There's a number of services available for this, however [here are the ones](http://nodemailer.com/smtp/well-known/) known to work with `nodemailer`.
:::info
For this tutorial, we're going to be using [Sendgrid](https://sendgrid.com/), but any of the services linked above should work the same
:::
<Callout>
For this tutorial, we're going to be using [Sendgrid](https://sendgrid.com/),
but any of the services linked above should work the same
</Callout>
First create an account in and then login to the dashboard, then navigate to "Settings → API Keys" and create an API key:
<img src={smtpConfig} />
<Image src={smtpConfig} />
Next paste the API in your terminal as so, and run the command:
@@ -172,30 +179,34 @@ Let's start by running a Next.js application with NextAuth, making sure the **Em
For this tutorial we're going to be using NextAuth example app. Launch the app and click on "Sign in", we're redirected to the Sign In page:
<img src={startPageImg} alt="Screenshot of sign in page" />
<Image src={startPageImg} alt="Screenshot of sign in page" />
:::info
You can customize the look and feel of your Sign in page pretty easily with NextAuth. Refer to our [pages guide](/guides/basics/pages) for that!
:::
<Callout>
You can customize the look and feel of your Sign in page pretty easily with
NextAuth. Refer to our [pages guide](/guides/basics/pages) for that!
</Callout>
Then we insert the email address we want to log-in with in the Email credentials section and click on "Sign in with Email".
NextAuth will then display another page hinting the user to check their email:
<img src={checkPageImg} alt="Screenshot of check email page" />
<Image src={checkPageImg} alt="Screenshot of check email page" />
Let's now check our email, and look for one sent from NextAuth (check your spam folder just in case):
<img src={mailboxImg} alt="Screenshot of mailbox" />
<Image src={mailboxImg} alt="Screenshot of mailbox" />
Nice! We got one, coming from the sender specified in the `EMAIL_FROM` environment variable from our configuration above and that's is the sender we verified in Sengrid.
Click on "Sign in" and a new browser tab will open, you should then land on your application as authenticated!
<img src={loggedInImg} alt="Screenshot of logged in" />
<Image src={loggedInImg} alt="Screenshot of logged in" />
Easy right? We had to configure Sendgrid and install a database adapter so the user sessions can be saved somewhere, but once done NextAuth will deal with all the user session management for us in a secure way!
:::info
A user account (i.e. an entry in the Users table) will not be created for the user until the first time they verify their email address. If an email address is already associated with an account, the user will be signed in to that account when they use the link in the email.
:::
<Callout>
A user account (i.e. an entry in the Users table) will not be created for the
user until the first time they verify their email address. If an email address
is already associated with an account, the user will be signed in to that
account when they use the link in the email.
</Callout>

59
docs-nextra/pages/getting-started/oauth-tutorial.mdx
View File

@@ -2,6 +2,9 @@
title: OAuth authentication
---
import { Callout } from "nextra-theme-docs"
import Image from "next/image"
import creatingOauthAppImg from "./img/getting-started-creating-oauth-app.png"
import addingCallbackUrlImg from "./img/getting-started-oauth-callback-url.png"
import gettingClientIdSecretImg from "./img/getting-started-oauth-clientid-secret.png"
@@ -13,9 +16,9 @@ We know, authentication is hard. Is a rabbit hole and it's easy to get lost on i
The easiest way is to setup Auth.js with an [OAuth](https://en.wikipedia.org/wiki/OAuth) provider. In this tutorial we'll be setting Auth.js in a **Next.js app** to be able to login with **Github**.
:::info
<Callout type="info">
Auth.js comes with a long list of [built-in providers](/reference/providers/oauth-builtin) (Google, Facebook, Twitter, etc...) you can also integrate it with your own OAuth service easily by [building a custom provider](/guides/providers/custom-provider). Auth.js can integrate as well with other frameworks like SvelteKit, SolidStart and Gatsby.
:::
</Callout>
## 1. Configuring Auth.js
@@ -62,9 +65,9 @@ $ openssl rand -base64 32
or https://generate-secret.vercel.app/32 to generate a random value for it.
:::info
<Callout type="info">
Auth.js is extremely customizable, [our guides section](/guides/overview) will teach you how you can set it up to handle auth in different ways. All the possible configuration options are [listed here](/reference/configuration/auth-config).
:::
</Callout>
### Exposing the session via provider
@@ -87,9 +90,9 @@ export default function App({
Instances of `useSession` (more on it in the next section) will then have access to the session data and status. The `<SessionProvider />` also takes care of keeping the session updated and synced between browser tabs and windows. 💪🏽
:::tip
<Callout>
Check our [client docs](/reference/react/) to learn all the available options for handling sessions on the browser.
:::
</Callout>
### Consuming the session via hooks
@@ -156,19 +159,19 @@ export default async function listMovies(req, res) {
Ok, we have our Next.js app setup with NextAuth, however, if you run the app right now, it won't work as we haven't configured our OAuth provider (**Github**) yet.
:::info
<Callout type="info">
When using OAuth you're asking for a third-party service (in this case Github, although it could be Google, Twitter, etc...) to handle user authentication for your app.
:::
</Callout>
We need to register our new Next.js app in Github, so that when Auth.js forwards the authorization requests to it, Github can recognize your application and prompt the user to sign in.
<img src={creatingOauthAppImg} />
<Image src={creatingOauthAppImg} />
Log in into **Github**, go to `Settings / Developers / OAuth Apps` and click on "New OAuth App".
Next you'll be presented with a screen to add details about your new application. Fill in the required fields, but pay extra attention to the **Authorization Callback URL** one:
<img src={addingCallbackUrlImg} />
<Image src={addingCallbackUrlImg} />
The callback URL we insert should have the following pattern:
@@ -182,19 +185,19 @@ In this case, given we want to try our authentication working locally on our mac
http://localhost:3000/api/auth/callback/github
```
:::info
<Callout type="info">
Auth.js will already magically create this API endpoint for you when we start the application later. Note that because we're using Next.js, locally it starts our server on the port `3000`, hence the origin is `http://localhost:3000`.
:::
</Callout>
Next you'll be presented with the following screen which presents all the configuration for your new OAuth app. For now, let's we need two things from it: the **Client ID** and **Client Secret** for our new OAuth app:
<img src={gettingClientIdSecretImg} />
<Image src={gettingClientIdSecretImg} />
The Client ID is always there, a public identifier of your OAuth application within Github. Click on the **Generate a new client Secret** button and should be presented with a new string (which is just a randomized string).
:::warning
<Callout type="warning">
🔥 Keep both your Client ID and Client Secret secure and never expose them to the public or shared with people outside your organization. With tem a malicious actor could hijack your application and cause you and your user serious problems!
:::
</Callout>
Now let's copy both the Client ID and Client Secret and paste them in an environment file in the root of your project like so:
@@ -205,16 +208,16 @@ GITHUB_SECRET=67890
Cool! We have finished the configuring our OAuth provider, now let's wire all together so we can finally see authentication working in our app!
:::info
<Callout type="info">
As noted previously, Auth.js has built-in support for multiple OAuth providers, <a href="">here the full list</a>. You can also easily build your own in case the provider you need is not on the list.
Note that, for each provider, the configuration process will be similar to what we just did:
1. Log in to the provider
2. Create create your OAuth application within it
3. Set the callback URL
4. Get the Client ID and Generate a Client Secret
:::
1. Log in to the provider
2. Create create your OAuth application within it
3. Set the callback URL
4. Get the Client ID and Generate a Client Secret
</Callout>
## 3. Wiring all together
@@ -242,21 +245,21 @@ $ npm run next dev
You should see the following page:
<img src={startAppAndSignInImg} />
<Image src={startAppAndSignInImg} />
Click on "Sign in" and then on "Sign in with Github": Auth.js will redirect you to Github, and Github will recognize our app [that we just registered](#2-configuring-oauth-provider) and ask the user (in this case you) to enter its credentials to proceed:
<img src={githubAuthCredentials} />
<Image src={githubAuthCredentials} />
Once inserted and correct, Github will redirect the user to our app and Auth.js will take care of any further calls with Github to get access to the user profile and start a user sessions safely in the background:
<img src={nextAuthUserLoggedIn} />
<Image src={nextAuthUserLoggedIn} />
Great! We have completed the whole E2E authentication flow setup so that users can login in our application through Github!
:::info
<Callout type="info">
You can create your own Sign In page instead of using the default one from Auth.js. You can learn how to do so in our dedicated guide for it.
:::
</Callout>
## 4. Deploying to production
@@ -290,10 +293,10 @@ When deploying your site, **you need to set** the `NEXTAUTH_URL` environment var
NEXTAUTH_URL=https://example.com
```
:::warning
<Callout type="warning">
In production, this needs to be set as an environment variable on the service you use to deploy your app.
To set environment variables on Vercel, you can use the [dashboard](https://vercel.com/dashboard) or the `vercel env pull` [command](https://vercel.com/docs/build-step#development-environment-variables).
:::
</Callout>
For more information please check out our [deployment page](/guides/basics/deployment).

13
docs-nextra/pages/guides/_meta.json Normal file
View File

@@ -0,0 +1,13 @@
{
"index": "Introduction",
"basics": "Basics",
"adapters": "Adapters",
"providers": "Providers",
"testing": "Testing",
"corporate-proxies": "Proxies",
"other": "Other",
"resources": "Community Resources",
"img": {
"display": "hidden"
}
}

4
docs-nextra/pages/guides/adapters/_meta.json Normal file
View File

@@ -0,0 +1,4 @@
{
"creating-a-database-adapter": "Create a Database Adapter",
"using-a-database-adapter": "Using a Database Adapter"
}

0
docs-nextra/pages/guides/adapters/creating-a-database-adapter.md → docs-nextra/pages/guides/adapters/creating-a-database-adapter.mdx
View File

8
docs-nextra/pages/guides/adapters/using-a-database-adapter.md → docs-nextra/pages/guides/adapters/using-a-database-adapter.mdx
View File

@@ -1,12 +1,14 @@
---
title: Using a database adapter
title: Using a Database Adapter
---
import { Callout } from 'nextra-theme-docs'
An **Adapter** in Auth.js connects your application to whatever database or backend system you want to use to store data for users, their accounts, sessions, etc. Adapters are optional, unless you need to persist user information in your own database, or you want to implement certain flows. The [Email Provider](/getting-started/email-tutorial) requires an adapter to be able to save [Verification Tokens](/reference/adapters/models#verification-token).
:::tip
<Callout>
When using a database, you can still use JWT for session handling for fast access. See the [`session.strategy`](/reference/configuration/auth-config#session) option. Read about the trade-offs of JWT in the [FAQ](/concepts/faq#json-web-tokens).
:::
</Callout>
We have a list of official adapters that are distributed as their own packages under the `@next-auth/{name}-adapter` namespace. Their source code is available in their various adapters package directories at [`nextauthjs/next-auth`](https://github.com/nextauthjs/next-auth/tree/main/packages):

11
docs-nextra/pages/guides/basics/_meta.json Normal file
View File

@@ -0,0 +1,11 @@
{
"initialization": "Initialization",
"callbacks": "Callbacks",
"events": "Events",
"pages": "Pages",
"securing-pages-and-api-routes": "Securing Pages and API Routes",
"overriding-jwt": "Overriding JWT",
"refresh-token-rotation": "Refresh Token Rotation",
"role-based-login-strategy": "Role-Based Access Control",
"deployment": "Deployment"
}

4
docs-nextra/pages/guides/corporate-proxies/_meta.json Normal file
View File

@@ -0,0 +1,4 @@
{
"avoid-corporate-link-checking-email-provider": "Email Provider Corporate Proxy Compatibility",
"corporate-proxy": "Corporate Proxies"
}

4
docs-nextra/pages/guides/other/_meta.json Normal file
View File

@@ -0,0 +1,4 @@
{
"ldap-auth": "LDAP Auth",
"usage-with-class-components": "Usage with Class Components"
}

5
docs-nextra/pages/guides/providers/_meta.json Normal file
View File

@@ -0,0 +1,5 @@
{
"credentials-provider": "Credentials Provider",
"email-provider": "Email Provider",
"custom-provider": "Custom Provider"
}

118
docs-nextra/pages/guides/resources.md
View File

@@ -1,118 +0,0 @@
---
id: resources
title: Community resources
---
> These tutorials are contributed by the community.
> **New submissions and edits are welcome!**
## Basics
#### [Introduction to Auth.js](https://www.youtube.com/watch?v=npZsJxWntJM) <svg role="img" viewBox="0 0 24 24" height="24" width="24" style={{ marginLeft: '5px', marginBottom:'-6px'}} xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path fill="#ff0000" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
- This is an introductory video to Auth.js for beginners. In this video, it is explained how to set up authentication in a few easy steps and add different configurations to make it more robust and secure.
#### [Authentication patterns for Next.js](https://nextjs.org/docs/authentication) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- Next.js supports multiple patterns for authentication, each designed for different use cases. This guide will allow you to choose your adventure based on your constraints. By Lee Robinson.
#### [Adding Authentication to an existing Next.js Application in no time!](https://dev.to/ndom91/adding-authentication-to-an-existing-serverless-next-js-app-in-no-time-with-nextauth-js-192h) <svg style={{ marginLeft: '5px', marginBottom:'-6px'}} width="30" height="25" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="40" rx="3" style={{ fill: '#000' }}></rect><path d="M19.099 23.508c0 1.31-.423 2.388-1.27 3.234-.838.839-1.942 1.258-3.312 1.258h-4.403V12.277h4.492c1.31 0 2.385.423 3.224 1.27.846.838 1.269 1.912 1.269 3.223v6.738zm-2.808 0V16.77c0-.562-.187-.981-.562-1.258-.374-.285-.748-.427-1.122-.427h-1.685v10.107h1.684c.375 0 .75-.138 1.123-.415.375-.285.562-.708.562-1.27zM28.185 28h-5.896c-.562 0-1.03-.187-1.404-.561-.375-.375-.562-.843-.562-1.404V14.243c0-.562.187-1.03.562-1.404.374-.375.842-.562 1.404-.562h5.896v2.808H23.13v3.65h3.088v2.808h-3.088v3.65h5.054V28zm7.12 0c-.936 0-1.684-.655-2.246-1.965l-3.65-13.758h3.089l2.807 10.804 2.808-10.804H41.2l-3.65 13.758C36.99 27.345 36.241 28 35.305 28z" style={{ fill: '#fff' }}></path></svg>
- This tutorial walks one through adding Auth.js to an existing project. Including setting up the OAuth client id and secret, adding the API routes for authentication, protecting pages and API routes behind that authentication, etc.
#### [Adding social authentication support to a Next.js app](https://getstarted.sh/bulletproof-next/add-social-authentication) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- A tutorial by Arunoda Susirpiala. Checkout [GetStarted](https://getstarted.sh/) for more examples.
#### [How to Authenticate Next.js Apps with Twitter & Auth.js](https://spacejelly.dev/posts/how-to-authenticate-next-js-apps-with-twitter-nextauth-js/) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- Learn how to add Twitter authentication and login to a Next.js app both client-side and server-side with Auth.js.
#### [NextJS Authentication Crash Course with Auth.js](https://youtu.be/o_wZIVmWteQ) <svg role="img" viewBox="0 0 24 24" height="24" width="24" style={{ marginLeft: '5px', marginBottom:'-6px'}} xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path fill="#ff0000" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
- This tutorial dives into the ins and outs of NextAuth, including using the Email, Github, Twitter and Auth0 providers in under an hour.
#### [Create your own Auth.js Login Pages](https://youtu.be/kB6YNYZ63fw) <svg role="img" viewBox="0 0 24 24" height="24" width="24" style={{ marginLeft: '5px', marginBottom:'-6px'}} xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path fill="#ff0000" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
- This tutorial shows you how to jump in and create your own custom login pages versus using the ones provided by Auth.js
#### [Passwordless Authentication with next-auth](https://www.youtube.com/watch?v=GPBD3acOx_M) <svg role="img" viewBox="0 0 24 24" height="24" width="24" style={{ marginLeft: '5px', marginBottom:'-6px'}} xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path fill="#ff0000" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
- A video tutorial by Xiaoru Li from Prisma.
#### [How to authenticate Next.js Apps with Sign-In With Ethereum (SIWE) & Auth.js](https://docs.login.xyz/integrations/Auth.js) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- Learn how to use Sign-In With Ethereum to authenticate your users with their existing Ethereum wallets - identifiers they personally control.
- Example application: [spruceid/siwe-next-auth-example](https://github.com/spruceid/siwe-next-auth-example)
#### [Next.js Authentication with Okta and Auth.js 4.0](https://thetombomb.com/posts/nextjs-nextauth-okta) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- Learn how to perform authentication with an OIDC Application in Okta and Auth.js.
## Fullstack
#### [Build a FullStack App with Next.js, Auth.js, Supabase & Prisma](https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-322389284337222224) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
In this [free course](https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-322389284337222224), you'll learn how to build a full-stack app using the following technologies:
- **Next.js** - The React framework for building the UI of the app and the REST API
- **Auth.js** - For implementing passwordless and OAuth authentication
- **Supabase** - For persisting the app data into a PostgreSQL database and storing media files
- **Prisma** - For making it easy to read and write data from our app from and to the database
The app that we'll work on in this course is called **_SupaVacation_**. It is an online marketplace for vacation rentals where users can browse through all the properties for rent, bookmark their favorite ones, and even rent their own properties.
> Here's [a live demo](https://supa-vacation.vercel.app/) of the app's final version. It is what your app should look likes after completing this course. Feel free to play with it to get an overview of all the features you'll be working on.
#### [Magic Link Authentication in Next.js with NextAuth and Fauna](https://alterclass.io/tutorials/magic-link-authentication-in-nextjs-with-nextauth-and-fauna) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
Learn how to implement passwordless/magic link authentication with database storage in your Next.js projects using NextAuth and Fauna DB.
> The final version of the project's code can be found on [Github](https://github.com/AlterClassIO/magic-next-auth). You can use it as a starting point for any Next.js app that requires passwordless authentication.
> You can also preview the example live [here](https://magic-next-auth.vercel.app/).
This tutorial covers:
- Configuring Next.js, Auth.js, and Fauna to work together seamlessly
- Using Next.js dynamic API routes to handle authentication requests
- Using Fauna and the Fauna Adapter for `next-auth` to persist users, email sign in tokens, and sessions
- Creating custom login and confirmation pages with React + Tailwind CSS
- Customizing the sign-in email and sending a welcome email to new users
#### [Passwordless Authentication with Next.js, Prisma, and next-auth](https://dev.to/prisma/passwordless-authentication-with-next-js-prisma-and-next-auth-5g8g) <svg style={{ marginLeft: '5px', marginBottom:'-6px'}} width="30" height="25" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="40" rx="3" style={{ fill: '#000' }}></rect><path d="M19.099 23.508c0 1.31-.423 2.388-1.27 3.234-.838.839-1.942 1.258-3.312 1.258h-4.403V12.277h4.492c1.31 0 2.385.423 3.224 1.27.846.838 1.269 1.912 1.269 3.223v6.738zm-2.808 0V16.77c0-.562-.187-.981-.562-1.258-.374-.285-.748-.427-1.122-.427h-1.685v10.107h1.684c.375 0 .75-.138 1.123-.415.375-.285.562-.708.562-1.27zM28.185 28h-5.896c-.562 0-1.03-.187-1.404-.561-.375-.375-.562-.843-.562-1.404V14.243c0-.562.187-1.03.562-1.404.374-.375.842-.562 1.404-.562h5.896v2.808H23.13v3.65h3.088v2.808h-3.088v3.65h5.054V28zm7.12 0c-.936 0-1.684-.655-2.246-1.965l-3.65-13.758h3.089l2.807 10.804 2.808-10.804H41.2l-3.65 13.758C36.99 27.345 36.241 28 35.305 28z" style={{ fill: '#fff' }}></path></svg>
- In this post, you'll learn how to add passwordless authentication to your Next.js app using Prisma and next-auth. By the end of this tutorial, your users will be able to log in to your app with either their GitHub account or a Slack-styled magic link sent right to their Email inbox. By Xiaoru Li.
#### [Fullstack Authentication Example with Next.js and Auth.js](https://github.com/prisma/prisma-examples/tree/latest/typescript/rest-nextjs-api-routes-auth) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- This example shows how to implement a full-stack app in TypeScript with Next.js using Prisma Client as a backend. It also demonstrates how to implement authentication using Auth.js. By Nikolas Burk at Prisma.
## Advanced
#### [Add auth support to a Next.js app with a custom backend](https://arunoda.me/blog/add-auth-support-to-a-next-js-app-with-a-custom-backend) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- A tutorial by Arunoda Susirpiala.
#### [How to Configure Azure AD B2C Authentication with Next.js](https://benjaminwfox.com/blog/tech/how-to-configure-azure-b2c-with-nextjs) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- Configuring authentication with Azure B2C in Next.js is not a particularly straight forward process. We'll look at how to facilitate this using the Auth.js library. By Ben Fox.
#### [Sign in with Apple in NextJS](https://thesiddd.com/blog/apple-auth) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- This tutorial walks step by step on how to get sign in with Apple working (both locally and on a deployed website) using Auth.js.
#### [Using Auth.js with Magic links](https://dev.to/narciero/using-nextauth-js-with-magic-links-df4) <svg style={{ marginLeft: '5px', marginBottom:'-6px'}} width="30" height="25" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="40" rx="3" style={{ fill: '#000' }}></rect><path d="M19.099 23.508c0 1.31-.423 2.388-1.27 3.234-.838.839-1.942 1.258-3.312 1.258h-4.403V12.277h4.492c1.31 0 2.385.423 3.224 1.27.846.838 1.269 1.912 1.269 3.223v6.738zm-2.808 0V16.77c0-.562-.187-.981-.562-1.258-.374-.285-.748-.427-1.122-.427h-1.685v10.107h1.684c.375 0 .75-.138 1.123-.415.375-.285.562-.708.562-1.27zM28.185 28h-5.896c-.562 0-1.03-.187-1.404-.561-.375-.375-.562-.843-.562-1.404V14.243c0-.562.187-1.03.562-1.404.374-.375.842-.562 1.404-.562h5.896v2.808H23.13v3.65h3.088v2.808h-3.088v3.65h5.054V28zm7.12 0c-.936 0-1.684-.655-2.246-1.965l-3.65-13.758h3.089l2.807 10.804 2.808-10.804H41.2l-3.65 13.758C36.99 27.345 36.241 28 35.305 28z" style={{ fill: '#fff' }}></path></svg>
- Learn how to use [Magic.Link](https://magic.link) authentication with [Auth.js](https://authjs.dev) to enable passwordless authentication without a database.
## Database
#### [Create a Auth.js Custom Adapter with HarperDB & Next.js](https://spacejelly.dev/posts/how-to-create-a-nextauth-js-custom-adapter-with-harperdb-next-js/) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- Use a custom database in a Custom Adapter for persisted Auth.js sessions using HarperDB as an example.
- Video tutorial also available: <https://www.youtube.com/watch?v=pu7xBv7sZ8s>
#### [Using Auth.js with Prisma and PlanetScale serverless databases](https://github.com/planetscale/nextjs-planetscale-starter) <svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px', marginBottom:'-6px'}} height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><title>External</title> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /> </svg>
- How to set up a PlanetScale database to fetch and store user / account data with the Prisma adapter.

122
docs-nextra/pages/guides/resources.mdx Normal file
View File

@@ -0,0 +1,122 @@
---
title: Community Resources
---
import { Callout } from "nextra-theme-docs"
import Image from "next/image"
<Callout type="info">
These tutorials are contributed by the community. **New submissions and edits
are welcome!**
</Callout>
## Basics
#### [Introduction to Auth.js](https://www.youtube.com/watch?v=npZsJxWntJM) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/youtube.svg" alt="YouTube Logo" />
- This is an introductory video to Auth.js for beginners. In this video, it is explained how to set up authentication in a few easy steps and add different configurations to make it more robust and secure.
#### [Authentication patterns for Next.js](https://nextjs.org/docs/authentication) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- Next.js supports multiple patterns for authentication, each designed for different use cases. This guide will allow you to choose your adventure based on your constraints. By Lee Robinson.
#### [Adding Authentication to an existing Next.js Application in no time!](https://dev.to/ndom91/adding-authentication-to-an-existing-serverless-next-js-app-in-no-time-with-nextauth-js-192h) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/devto.svg" alt="Dev.to Logo" />
- This tutorial walks one through adding Auth.js to an existing project. Including setting up the OAuth client id and secret, adding the API routes for authentication, protecting pages and API routes behind that authentication, etc.
#### [Adding social authentication support to a Next.js app](https://getstarted.sh/bulletproof-next/add-social-authentication) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- A tutorial by Arunoda Susirpiala. Checkout [GetStarted](https://getstarted.sh/) for more examples.
#### [How to Authenticate Next.js Apps with Twitter & Auth.js](https://spacejelly.dev/posts/how-to-authenticate-next-js-apps-with-twitter-nextauth-js/) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- Learn how to add Twitter authentication and login to a Next.js app both client-side and server-side with Auth.js.
#### [NextJS Authentication Crash Course with Auth.js](https://youtu.be/o_wZIVmWteQ) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/youtube.svg" alt="YouTube Logo" />
- This tutorial dives into the ins and outs of NextAuth, including using the Email, Github, Twitter and Auth0 providers in under an hour.
#### [Create your own Auth.js Login Pages](https://youtu.be/kB6YNYZ63fw) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/youtube.svg" alt="YouTube Logo" />
- This tutorial shows you how to jump in and create your own custom login pages versus using the ones provided by Auth.js
#### [Passwordless Authentication with next-auth](https://www.youtube.com/watch?v=GPBD3acOx_M) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/youtube.svg" alt="YouTube Logo" />
- A video tutorial by Xiaoru Li from Prisma.
#### [How to authenticate Next.js Apps with Sign-In With Ethereum (SIWE) & Auth.js](https://docs.login.xyz/integrations/Auth.js) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- Learn how to use Sign-In With Ethereum to authenticate your users with their existing Ethereum wallets - identifiers they personally control.
- Example application: [`spruceid/siwe-next-auth-example`](https://github.com/spruceid/siwe-next-auth-example)
#### [Next.js Authentication with Okta and Auth.js 4.0](https://thetombomb.com/posts/nextjs-nextauth-okta) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- Learn how to perform authentication with an OIDC Application in Okta and Auth.js.
## Fullstack
#### [Build a FullStack App with Next.js, Auth.js, Supabase & Prisma](https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-242389284337222224) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
In this [free course](https://themodern.dev/courses/build-a-fullstack-app-with-nextjs-supabase-and-prisma-242389284337222224), you'll learn how to build a full-stack app using the following technologies:
- **Next.js** - The React framework for building the UI of the app and the REST API
- **Auth.js** - For implementing passwordless and OAuth authentication
- **Supabase** - For persisting the app data into a PostgreSQL database and storing media files
- **Prisma** - For making it easy to read and write data from our app from and to the database
The app that we'll work on in this course is called **_SupaVacation_**. It is an online marketplace for vacation rentals where users can browse through all the properties for rent, bookmark their favorite ones, and even rent their own properties.
> Here's [a live demo](https://supa-vacation.vercel.app/) of the app's final version. It is what your app should look likes after completing this course. Feel free to play with it to get an overview of all the features you'll be working on.
#### [Magic Link Authentication in Next.js with NextAuth and Fauna](https://alterclass.io/tutorials/magic-link-authentication-in-nextjs-with-nextauth-and-fauna) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
Learn how to implement passwordless/magic link authentication with database storage in your Next.js projects using NextAuth and Fauna DB.
> The final version of the project's code can be found on [Github](https://github.com/AlterClassIO/magic-next-auth). You can use it as a starting point for any Next.js app that requires passwordless authentication.
This tutorial covers:
- Configuring Next.js, Auth.js, and Fauna to work together seamlessly
- Using Next.js dynamic API routes to handle authentication requests
- Using Fauna and the Fauna Adapter for `next-auth` to persist users, email sign in tokens, and sessions
- Creating custom login and confirmation pages with React + Tailwind CSS
- Customizing the sign-in email and sending a welcome email to new users
> You can also preview the example live [here](https://magic-next-auth.vercel.app/).
#### [Passwordless Authentication with Next.js, Prisma, and next-auth](https://dev.to/prisma/passwordless-authentication-with-next-js-prisma-and-next-auth-5g8g) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/devto.svg" alt="Dev.to Logo" />
- In this post, you'll learn how to add passwordless authentication to your Next.js app using Prisma and next-auth. By the end of this tutorial, your users will be able to log in to your app with either their GitHub account or a Slack-styled magic link sent right to their Email inbox. By Xiaoru Li.
#### [Fullstack Authentication Example with Next.js and Auth.js](https://github.com/prisma/prisma-examples/tree/latest/typescript/rest-nextjs-api-routes-auth) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- This example shows how to implement a full-stack app in TypeScript with Next.js using Prisma Client as a backend. It also demonstrates how to implement authentication using Auth.js. By Nikolas Burk at Prisma.
## Advanced
#### [Add auth support to a Next.js app with a custom backend](https://arunoda.me/blog/add-auth-support-to-a-next-js-app-with-a-custom-backend) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- A tutorial by Arunoda Susirpiala.
#### [How to Configure Azure AD B2C Authentication with Next.js](https://benjaminwfox.com/blog/tech/how-to-configure-azure-b2c-with-nextjs) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- Configuring authentication with Azure B2C in Next.js is not a particularly straight forward process. We'll look at how to facilitate this using the Auth.js library. By Ben Fox.
#### [Sign in with Apple in NextJS](https://thesiddd.com/blog/apple-auth) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- This tutorial walks step by step on how to get sign in with Apple working (both locally and on a deployed website) using Auth.js.
#### [Using Auth.js with Magic links](https://dev.to/narciero/using-nextauth-js-with-magic-links-df4) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/devto.svg" alt="Dev.to Logo" />
- Learn how to use [Magic.Link](https://magic.link) authentication with [Auth.js](https://authjs.dev) to enable passwordless authentication without a database.
## Database
#### [Create a Auth.js Custom Adapter with HarperDB & Next.js](https://spacejelly.dev/posts/how-to-create-a-nextauth-js-custom-adapter-with-harperdb-next-js/) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- Use a custom database in a Custom Adapter for persisted Auth.js sessions using HarperDB as an example.
- Video tutorial also available: [https://www.youtube.com/watch?v=pu7xBv7sZ8s](https://www.youtube.com/watch?v=pu7xBv7sZ8s)
#### [Using Auth.js with Prisma and PlanetScale serverless databases](https://github.com/planetscale/nextjs-planetscale-starter) <Image style={{ marginLeft: '0.5rem', display: 'inline' }} width={24} height={24} src="/img/external.svg" alt="External" />
- How to set up a PlanetScale database to fetch and store user / account data with the Prisma adapter.

3
docs-nextra/pages/guides/testing/_meta.json Normal file
View File

@@ -0,0 +1,3 @@
{
"testing-with-cypress": "Testing with Cypress"
}

1
docs-nextra/public/img/devto.svg Normal file
View File

@@ -0,0 +1 @@
<svg width="30" height="25" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg" style=""><rect width="50" height="40" rx="3" style="fill: rgb(0, 0, 0);"></rect><path d="M19.099 23.508c0 1.31-.423 2.388-1.27 3.234-.838.839-1.942 1.258-3.312 1.258h-4.403V12.277h4.492c1.31 0 2.385.423 3.224 1.27.846.838 1.269 1.912 1.269 3.223v6.738zm-2.808 0V16.77c0-.562-.187-.981-.562-1.258-.374-.285-.748-.427-1.122-.427h-1.685v10.107h1.684c.375 0 .75-.138 1.123-.415.375-.285.562-.708.562-1.27zM28.185 28h-5.896c-.562 0-1.03-.187-1.404-.561-.375-.375-.562-.843-.562-1.404V14.243c0-.562.187-1.03.562-1.404.374-.375.842-.562 1.404-.562h5.896v2.808H23.13v3.65h3.088v2.808h-3.088v3.65h5.054V28zm7.12 0c-.936 0-1.684-.655-2.246-1.965l-3.65-13.758h3.089l2.807 10.804 2.808-10.804H41.2l-3.65 13.758C36.99 27.345 36.241 28 35.305 28z" style="fill: rgb(255, 255, 255);"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 877 B

1
docs-nextra/public/img/external.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="color:#ccc"><title>External</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg>
Side by Side

After

Width:  |  Height:  |  Size: 325 B

1
docs-nextra/public/img/youtube.svg Normal file
View File

@@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg" style=""><title>YouTube</title><path fill="#ff0000" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 513 B

472
pnpm-lock.yaml generated
View File

@@ -210,6 +210,7 @@ importers:
docs-nextra:
specifiers:
'@codesandbox/sandpack-react': ^2.0.6
autoprefixer: ^10.4.13
framer-motion: ^8.4.3
next: 13.1.1
@@ -221,13 +222,14 @@ importers:
typedoc: ^0.23.24
typedoc-plugin-markdown: next
dependencies:
'@codesandbox/sandpack-react': 2.0.6
framer-motion: 8.4.3
next: 13.1.1
nextra: 2.2.5_j4vyfcyy7dvdnacninku6iy4vm_next@13.1.1
nextra-theme-docs: 2.2.5_next@13.1.1
remark-link-rewrite: 1.0.6
typedoc: 0.23.24
typedoc-plugin-markdown: 4.0.0-next.1_typedoc@0.23.24
typedoc-plugin-markdown: 4.0.0-next.3_typedoc@0.23.24
devDependencies:
autoprefixer: 10.4.13_postcss@8.4.21
postcss: 8.4.21
@@ -6226,6 +6228,147 @@ packages:
mime: 3.0.0
dev: true
/@code-hike/classer/0.0.0-e48fa74:
resolution: {integrity: sha512-CyPYvfl4K5Hp9uyhLhUemul56eiGOF0FNXh5ALzzK9VNhRmRmj1O0mKtLDpoccI8W90r9kQES/nW2FC8jVVieg==}
peerDependencies:
react: '>=16.8'
dev: false
/@codemirror/autocomplete/6.4.2:
resolution: {integrity: sha512-8WE2xp+D0MpWEv5lZ6zPW1/tf4AGb358T5GWYiKEuCP8MvFfT3tH2mIF9Y2yr2e3KbHuSvsVhosiEyqCpiJhZQ==}
dependencies:
'@codemirror/language': 6.6.0
'@codemirror/state': 6.2.0
'@codemirror/view': 6.9.1
'@lezer/common': 1.0.2
dev: false
/@codemirror/commands/6.2.1:
resolution: {integrity: sha512-FFiNKGuHA5O8uC6IJE5apI5rT9gyjlw4whqy4vlcX0wE/myxL6P1s0upwDhY4HtMWLOwzwsp0ap3bjdQhvfDOA==}
dependencies:
'@codemirror/language': 6.6.0
'@codemirror/state': 6.2.0
'@codemirror/view': 6.9.1
'@lezer/common': 1.0.2
dev: false
/@codemirror/lang-css/6.0.2:
resolution: {integrity: sha512-4V4zmUOl2Glx0GWw0HiO1oGD4zvMlIQ3zx5hXOE6ipCjhohig2bhWRAasrZylH9pRNTcl1VMa59Lsl8lZWlTzw==}
dependencies:
'@codemirror/autocomplete': 6.4.2
'@codemirror/language': 6.6.0
'@codemirror/state': 6.2.0
'@lezer/css': 1.1.1
dev: false
/@codemirror/lang-html/6.4.2:
resolution: {integrity: sha512-bqCBASkteKySwtIbiV/WCtGnn/khLRbbiV5TE+d9S9eQJD7BA4c5dTRm2b3bVmSpilff5EYxvB4PQaZzM/7cNw==}
dependencies:
'@codemirror/autocomplete': 6.4.2
'@codemirror/lang-css': 6.0.2
'@codemirror/lang-javascript': 6.1.4
'@codemirror/language': 6.6.0
'@codemirror/state': 6.2.0
'@codemirror/view': 6.9.1
'@lezer/common': 1.0.2
'@lezer/css': 1.1.1
'@lezer/html': 1.3.2
dev: false
/@codemirror/lang-javascript/6.1.4:
resolution: {integrity: sha512-OxLf7OfOZBTMRMi6BO/F72MNGmgOd9B0vetOLvHsDACFXayBzW8fm8aWnDM0yuy68wTK03MBf4HbjSBNRG5q7A==}
dependencies:
'@codemirror/autocomplete': 6.4.2
'@codemirror/language': 6.6.0
'@codemirror/lint': 6.1.1
'@codemirror/state': 6.2.0
'@codemirror/view': 6.9.1
'@lezer/common': 1.0.2
'@lezer/javascript': 1.4.1
dev: false
/@codemirror/language/6.6.0:
resolution: {integrity: sha512-cwUd6lzt3MfNYOobdjf14ZkLbJcnv4WtndYaoBkbor/vF+rCNguMPK0IRtvZJG4dsWiaWPcK8x1VijhvSxnstg==}
dependencies:
'@codemirror/state': 6.2.0
'@codemirror/view': 6.9.1
'@lezer/common': 1.0.2
'@lezer/highlight': 1.1.3
'@lezer/lr': 1.3.3
style-mod: 4.0.0
dev: false
/@codemirror/lint/6.1.1:
resolution: {integrity: sha512-e+M543x0NVHGayNHQzLP4XByJsvbu/ojY6+0VF2Y4Uu66Rt1nADuxNflZwECLf7gS009smIsptSUa6bUj/U/rw==}
dependencies:
'@codemirror/state': 6.2.0
'@codemirror/view': 6.9.1
crelt: 1.0.5
dev: false
/@codemirror/state/6.2.0:
resolution: {integrity: sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==}
dev: false
/@codemirror/view/6.9.1:
resolution: {integrity: sha512-bzfSjJn9dAADVpabLKWKNmMG4ibyTV2e3eOGowjElNPTdTkSbi6ixPYHm2u0ADcETfKsi2/R84Rkmi91dH9yEg==}
dependencies:
'@codemirror/state': 6.2.0
style-mod: 4.0.0
w3c-keyname: 2.2.6
dev: false
/@codesandbox/nodebox/0.1.0:
resolution: {integrity: sha512-gcpoFoLY0M34l67rXJCA8ysdRBN9aj++ebXpfLn2KCl7H2XongKkvYi/uQiKGoQ8iH5EhKe8+x40y/NrCS9J9Q==}
dependencies:
outvariant: 1.3.0
strict-event-emitter: 0.4.6
dev: false
/@codesandbox/sandpack-client/2.0.1:
resolution: {integrity: sha512-2Z4p59AAt6SCqWe6gxUL7yJBHPPCb4/IhSrSZC3pMetQiz7qt++jhMNE2KcAQQ+f5HXOFA6d5HsVU9+v5+sX8Q==}
dependencies:
'@codesandbox/nodebox': 0.1.0
codesandbox-import-utils: 1.3.8
console-feed: 3.3.0
lodash.isequal: 4.5.0
outvariant: 1.3.0
transitivePeerDependencies:
- jquery
- react
- react-dom
dev: false
/@codesandbox/sandpack-react/2.0.6:
resolution: {integrity: sha512-D2AkmW0mLBrqAxrEOxlM9y49Wvw1tP94HAUwLhypYbZj7KmmUZVdkWsY2/GRLM4OfiAv75Xbqf4OiZ8Ni4G/1A==}
peerDependencies:
react: ^16.8.0 || ^17 || ^18
react-dom: ^16.8.0 || ^17 || ^18
dependencies:
'@code-hike/classer': 0.0.0-e48fa74
'@codemirror/autocomplete': 6.4.2
'@codemirror/commands': 6.2.1
'@codemirror/lang-css': 6.0.2
'@codemirror/lang-html': 6.4.2
'@codemirror/lang-javascript': 6.1.4
'@codemirror/language': 6.6.0
'@codemirror/state': 6.2.0
'@codemirror/view': 6.9.1
'@codesandbox/sandpack-client': 2.0.1
'@lezer/highlight': 1.1.3
'@react-hook/intersection-observer': 3.1.1
'@stitches/core': 1.2.8
ansi-to-react: 6.1.6
clean-set: 1.1.2
codesandbox-import-util-types: 2.2.3
lodash.isequal: 4.5.0
lz-string: 1.4.4
react-devtools-inline: 4.4.0
react-is: 17.0.2
transitivePeerDependencies:
- jquery
dev: false
/@colors/colors/1.5.0:
resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
engines: {node: '>=0.1.90'}
@@ -7035,13 +7178,46 @@ packages:
'@edge-runtime/primitives': 1.1.0-beta.36
dev: true
/@emotion/cache/10.0.29:
resolution: {integrity: sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==}
dependencies:
'@emotion/sheet': 0.9.4
'@emotion/stylis': 0.8.5
'@emotion/utils': 0.11.3
'@emotion/weak-memoize': 0.2.5
dev: false
/@emotion/core/10.3.1:
resolution: {integrity: sha512-447aUEjPIm0MnE6QYIaFz9VQOHSXf4Iu6EWOIqq11EAPqinkSZmfymPTmlOE3QjLv846lH4JVZBUOtwGbuQoww==}
peerDependencies:
react: '>=16.3.0'
dependencies:
'@babel/runtime': 7.20.7
'@emotion/cache': 10.0.29
'@emotion/css': 10.0.27
'@emotion/serialize': 0.11.16
'@emotion/sheet': 0.9.4
'@emotion/utils': 0.11.3
dev: false
/@emotion/css/10.0.27:
resolution: {integrity: sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==}
dependencies:
'@emotion/serialize': 0.11.16
'@emotion/utils': 0.11.3
babel-plugin-emotion: 10.2.2
dev: false
/@emotion/hash/0.8.0:
resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
dev: false
/@emotion/is-prop-valid/0.8.8:
resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
requiresBuild: true
dependencies:
'@emotion/memoize': 0.7.4
dev: false
optional: true
/@emotion/is-prop-valid/1.2.0:
resolution: {integrity: sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==}
@@ -7052,12 +7228,49 @@ packages:
/@emotion/memoize/0.7.4:
resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
dev: false
optional: true
/@emotion/memoize/0.8.0:
resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
dev: false
/@emotion/serialize/0.11.16:
resolution: {integrity: sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==}
dependencies:
'@emotion/hash': 0.8.0
'@emotion/memoize': 0.7.4
'@emotion/unitless': 0.7.5
'@emotion/utils': 0.11.3
csstype: 2.6.21
dev: false
/@emotion/sheet/0.9.4:
resolution: {integrity: sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==}
dev: false
/@emotion/styled-base/10.3.0_@emotion+core@10.3.1:
resolution: {integrity: sha512-PBRqsVKR7QRNkmfH78hTSSwHWcwDpecH9W6heujWAcyp2wdz/64PP73s7fWS1dIPm8/Exc8JAzYS8dEWXjv60w==}
peerDependencies:
'@emotion/core': ^10.0.28
react: '>=16.3.0'
dependencies:
'@babel/runtime': 7.20.7
'@emotion/core': 10.3.1
'@emotion/is-prop-valid': 0.8.8
'@emotion/serialize': 0.11.16
'@emotion/utils': 0.11.3
dev: false
/@emotion/styled/10.3.0_@emotion+core@10.3.1:
resolution: {integrity: sha512-GgcUpXBBEU5ido+/p/mCT2/Xx+Oqmp9JzQRuC+a4lYM4i4LBBn/dWvc0rQ19N9ObA8/T4NWMrPNe79kMBDJqoQ==}
peerDependencies:
'@emotion/core': ^10.0.27
react: '>=16.3.0'
dependencies:
'@emotion/core': 10.3.1
'@emotion/styled-base': 10.3.0_@emotion+core@10.3.1
babel-plugin-emotion: 10.2.2
dev: false
/@emotion/stylis/0.8.5:
resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==}
dev: false
@@ -7066,6 +7279,14 @@ packages:
resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
dev: false
/@emotion/utils/0.11.3:
resolution: {integrity: sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==}
dev: false
/@emotion/weak-memoize/0.2.5:
resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==}
dev: false
/@es-joy/jsdoccomment/0.36.1:
resolution: {integrity: sha512-922xqFsTpHs6D0BUiG4toiyPOMc8/jafnWKxz1KWgS4XzKPy2qXf1Pe6UFuNSCQqt6tOuhAWXBNuuyUhJmw9Vg==}
engines: {node: ^14 || ^16 || ^17 || ^18 || ^19}
@@ -9006,12 +9227,50 @@ packages:
resolution: {integrity: sha512-edfwCxNLnzq5pBA/yaIhwJ3U3Kz8VAUOTRg0hhxaizaI1N+qxV7EXDv/kLCkLeq2RzSFvxexlaj5Mzfn2kY0Ig==}
dev: false
/@lezer/common/1.0.2:
resolution: {integrity: sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==}
dev: false
/@lezer/css/1.1.1:
resolution: {integrity: sha512-mSjx+unLLapEqdOYDejnGBokB5+AiJKZVclmud0MKQOKx3DLJ5b5VTCstgDDknR6iIV4gVrN6euzsCnj0A2gQA==}
dependencies:
'@lezer/highlight': 1.1.3
'@lezer/lr': 1.3.3
dev: false
/@lezer/highlight/1.1.3:
resolution: {integrity: sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==}
dependencies:
'@lezer/common': 1.0.2
dev: false
/@lezer/html/1.3.2:
resolution: {integrity: sha512-LKGyDdqqDugXR/lKM9FwaKEfMerbZ/aqvhLf0P1FLLK/pVP7wKHXGcg6g3cJ7ckvFidn0tXA8jioG0irVsCBAQ==}
dependencies:
'@lezer/common': 1.0.2
'@lezer/highlight': 1.1.3
'@lezer/lr': 1.3.3
dev: false
/@lezer/javascript/1.4.1:
resolution: {integrity: sha512-Hqx36DJeYhKtdpc7wBYPR0XF56ZzIp0IkMO/zNNj80xcaFOV4Oj/P7TQc/8k2TxNhzl7tV5tXS8ZOCPbT4L3nA==}
dependencies:
'@lezer/highlight': 1.1.3
'@lezer/lr': 1.3.3
dev: false
/@lezer/lr/0.15.8:
resolution: {integrity: sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==}
dependencies:
'@lezer/common': 0.15.12
dev: false
/@lezer/lr/1.3.3:
resolution: {integrity: sha512-JPQe3mwJlzEVqy67iQiiGozhcngbO8QBgpqZM6oL1Wj/dXckrEexpBLeFkq0edtW5IqnPRFxA24BHJni8Js69w==}
dependencies:
'@lezer/common': 1.0.2
dev: false
/@lmdb/lmdb-darwin-arm64/2.5.2:
resolution: {integrity: sha512-+F8ioQIUN68B4UFiIBYu0QQvgb9FmlKw2ctQMSBfW2QBrZIxz9vD9jCGqTCPqZBRbPHAS/vG1zSXnKqnS2ch/A==}
cpu: [arm64]
@@ -10436,6 +10695,21 @@ packages:
resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
dev: true
/@react-hook/intersection-observer/3.1.1:
resolution: {integrity: sha512-OTDx8/wFaRvzFtKl1dEUEXSOqK2zVJHporiTTdC2xO++0e9FEx9wIrPis5q3lqtXeZH9zYGLbk+aB75qNFbbuw==}
peerDependencies:
react: '>=16.8'
dependencies:
'@react-hook/passive-layout-effect': 1.2.1
intersection-observer: 0.10.0
dev: false
/@react-hook/passive-layout-effect/1.2.1:
resolution: {integrity: sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==}
peerDependencies:
react: '>=16.8'
dev: false
/@rollup/plugin-alias/4.0.2_rollup@2.79.1:
resolution: {integrity: sha512-1hv7dBOZZwo3SEupxn4UA2N0EDThqSSS+wI1St1TNTBtOZvUchyIClyHcnDcjjrReTPZ47Faedrhblv4n+T5UQ==}
engines: {node: '>=14.0.0'}
@@ -10697,6 +10971,10 @@ packages:
resolution: {integrity: sha512-O3uyB/JbkAEMZaP3YqyHH7TMnex7tWyCbCI4EfJdOCoN6HIhqdJBWTM6aCCiWQ/5f5wxjgU735QAIpJbjDvmzg==}
dev: true
/@stitches/core/1.2.8:
resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
dev: false
/@supabase/functions-js/2.0.0:
resolution: {integrity: sha512-ozb7bds2yvf5k7NM2ZzUkxvsx4S4i2eRKFSJetdTADV91T65g4gCzEs9L3LUXSrghcGIkUaon03VPzOrFredqg==}
dependencies:
@@ -13077,6 +13355,10 @@ packages:
'@algolia/transporter': 4.14.3
dev: true
/anser/1.4.10:
resolution: {integrity: sha512-hCv9AqTQ8ycjpSd3upOJd7vFwW1JaoYQ7tpham03GJ1ca8/65rqn0RpaWpItOAd6ylW9wAw6luXYPJIyPFVOww==}
dev: false
/anser/2.1.1:
resolution: {integrity: sha512-nqLm4HxOTpeLOxcmB3QWmV5TcDFhW9y/fyQ+hivtDFcK4OQ+pQ5fzPnXHM1Mfcm0VkLtvVi1TCPr++Qy0Q/3EQ==}
dev: false
@@ -13165,6 +13447,16 @@ packages:
engines: {node: '>=12'}
dev: true
/ansi-to-react/6.1.6:
resolution: {integrity: sha512-+HWn72GKydtupxX9TORBedqOMsJRiKTqaLUKW8txSBZw9iBpzPKLI8KOu4WzwD4R7hSv1zEspobY6LwlWvwZ6Q==}
peerDependencies:
react: ^16.3.2 || ^17.0.0
react-dom: ^16.3.2 || ^17.0.0
dependencies:
anser: 1.4.10
escape-carriage: 1.3.0
dev: false
/ansicolors/0.3.2:
resolution: {integrity: sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg==}
dev: true
@@ -13641,6 +13933,21 @@ packages:
dependencies:
object.assign: 4.1.4
/babel-plugin-emotion/10.2.2:
resolution: {integrity: sha512-SMSkGoqTbTyUTDeuVuPIWifPdUGkTk1Kf9BWRiXIOIcuyMfsdp2EjeiiFvOzX8NOBvEh/ypKYvUh2rkgAJMCLA==}
dependencies:
'@babel/helper-module-imports': 7.18.6
'@emotion/hash': 0.8.0
'@emotion/memoize': 0.7.4
'@emotion/serialize': 0.11.16
babel-plugin-macros: 2.8.0
babel-plugin-syntax-jsx: 6.18.0
convert-source-map: 1.8.0
escape-string-regexp: 1.0.5
find-root: 1.1.0
source-map: 0.5.7
dev: false
/babel-plugin-extract-import-names/1.6.22:
resolution: {integrity: sha512-yJ9BsJaISua7d8zNT7oRG1ZLBJCIdZ4PZqmH8qa9N5AK01ifk3fnkc98AXhtzE7UkfCsEumvoQWgoYLhOnJ7jQ==}
dependencies:
@@ -13718,6 +14025,14 @@ packages:
require-package-name: 2.0.1
dev: false
/babel-plugin-macros/2.8.0:
resolution: {integrity: sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==}
dependencies:
'@babel/runtime': 7.20.7
cosmiconfig: 6.0.0
resolve: 1.22.1
dev: false
/babel-plugin-macros/3.1.0:
resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
engines: {node: '>=10', npm: '>=6'}
@@ -14127,6 +14442,11 @@ packages:
chainsaw: 0.1.0
dev: true
/binaryextensions/2.3.0:
resolution: {integrity: sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==}
engines: {node: '>=0.8'}
dev: false
/bindings/1.5.0:
resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
dependencies:
@@ -14847,6 +15167,10 @@ packages:
source-map: 0.6.1
dev: true
/clean-set/1.1.2:
resolution: {integrity: sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==}
dev: false
/clean-stack/2.2.0:
resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
engines: {node: '>=6'}
@@ -15012,6 +15336,22 @@ packages:
engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
dev: true
/codesandbox-import-util-types/1.3.7:
resolution: {integrity: sha512-8oP3emA0jyEuVOM2FBTpo/AF4C9vxHn14saVWZf2CQ/QhMtonBlNPE98ElrHkW+PFNXiO7Ad52Qr73b03n8qlA==}
dev: false
/codesandbox-import-util-types/2.2.3:
resolution: {integrity: sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==}
dev: false
/codesandbox-import-utils/1.3.8:
resolution: {integrity: sha512-S12zO49QEkldoYLGh5KbkHRLOacg5BCNTue2vlyZXSpuK3oQdArwC/G1hCLKryV460bW3Ecn5xdkpfkUcFeOwQ==}
dependencies:
codesandbox-import-util-types: 1.3.7
istextorbinary: 2.2.1
lz-string: 1.4.4
dev: false
/collapse-white-space/1.0.6:
resolution: {integrity: sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==}
dev: true
@@ -15279,6 +15619,21 @@ packages:
resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
dev: true
/console-feed/3.3.0:
resolution: {integrity: sha512-GS0EtpiLyAZGEYBtTih+uI3s3NDmOsfkgpNGhr7UWeM5BzDT+dKgit2nEMFwDb2w7NaT95774/cwAztA1BxrHQ==}
peerDependencies:
react: ^15.x || ^16.x || ^17.x
dependencies:
'@emotion/core': 10.3.1
'@emotion/styled': 10.3.0_@emotion+core@10.3.1
emotion-theming: 10.3.0_@emotion+core@10.3.1
linkifyjs: 2.1.9
react-inspector: 5.1.1
transitivePeerDependencies:
- jquery
- react-dom
dev: false
/constant-case/3.0.4:
resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
dependencies:
@@ -15458,6 +15813,10 @@ packages:
resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
dev: true
/crelt/1.0.5:
resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
dev: false
/cross-env/5.2.1:
resolution: {integrity: sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==}
engines: {node: '>=4.0'}
@@ -15835,7 +16194,6 @@ packages:
/csstype/2.6.21:
resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
dev: true
/csstype/3.1.0:
resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
@@ -17067,6 +17425,11 @@ packages:
dependencies:
safe-buffer: 5.2.1
/editions/1.3.4:
resolution: {integrity: sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==}
engines: {node: '>=0.8'}
dev: false
/editorconfig/0.15.3:
resolution: {integrity: sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==}
hasBin: true
@@ -17112,6 +17475,18 @@ packages:
resolution: {integrity: sha512-SNujglcLTTg+lDAcApPNgEdudaqQFiAbJCqzjNxJkvN9vAwCGi0uu8IUVvx+f16h+V44KCY6Y2yboroc9pilHg==}
dev: true
/emotion-theming/10.3.0_@emotion+core@10.3.1:
resolution: {integrity: sha512-mXiD2Oj7N9b6+h/dC6oLf9hwxbtKHQjoIqtodEyL8CpkN4F3V4IK/BT4D0C7zSs4BBFOu4UlPJbvvBLa88SGEA==}
peerDependencies:
'@emotion/core': ^10.0.27
react: '>=16.3.0'
dependencies:
'@babel/runtime': 7.20.7
'@emotion/core': 10.3.1
'@emotion/weak-memoize': 0.2.5
hoist-non-react-statics: 3.3.2
dev: false
/enabled/2.0.0:
resolution: {integrity: sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==}
dev: true
@@ -17845,6 +18220,10 @@ packages:
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
engines: {node: '>=6'}
/escape-carriage/1.3.0:
resolution: {integrity: sha512-ATWi5MD8QlAGQOeMgI8zTp671BG8aKvAC0M7yenlxU4CRLGO/sKthxVUyjiOFKjHdIo+6dZZUNFgHFeVEaKfGQ==}
dev: false
/escape-goat/2.1.1:
resolution: {integrity: sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==}
engines: {node: '>=8'}
@@ -19154,6 +19533,10 @@ packages:
find-file-up: 0.1.3
dev: true
/find-root/1.1.0:
resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
dev: false
/find-up/3.0.0:
resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
engines: {node: '>=6'}
@@ -21544,6 +21927,10 @@ packages:
engines: {node: '>= 0.10'}
dev: true
/intersection-observer/0.10.0:
resolution: {integrity: sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==}
dev: false
/intersection-observer/0.12.2:
resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
dev: false
@@ -21720,6 +22107,13 @@ packages:
hasBin: true
dev: true
/is-dom/1.1.0:
resolution: {integrity: sha512-u82f6mvhYxRPKpw8V1N0W8ce1xXwOrQtgGcxl6UCL5zBmZu3is/18K0rR7uFCnMDuAsS/3W54mGL4vsaFUQlEQ==}
dependencies:
is-object: 1.0.2
is-window: 1.0.2
dev: false
/is-extendable/0.1.1:
resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
engines: {node: '>=0.10.0'}
@@ -21856,6 +22250,10 @@ packages:
engines: {node: '>=12'}
dev: false
/is-object/1.0.2:
resolution: {integrity: sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==}
dev: false
/is-path-cwd/2.2.0:
resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
engines: {node: '>=6'}
@@ -22071,6 +22469,10 @@ packages:
resolution: {integrity: sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==}
dev: true
/is-window/1.0.2:
resolution: {integrity: sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==}
dev: false
/is-windows/0.2.0:
resolution: {integrity: sha512-n67eJYmXbniZB7RF4I/FTjK1s6RPOCTxhYrVYLRaCt3lF0mpWZPKr3T2LSZAqyjQsxR2qMmGYXXzK0YWwcPM1Q==}
engines: {node: '>=0.10.0'}
@@ -22185,6 +22587,15 @@ packages:
istanbul-lib-report: 3.0.0
dev: true
/istextorbinary/2.2.1:
resolution: {integrity: sha512-TS+hoFl8Z5FAFMK38nhBkdLt44CclNRgDHWeMgsV8ko3nDlr/9UI2Sf839sW7enijf8oKsZYXRvM8g0it9Zmcw==}
engines: {node: '>=0.12'}
dependencies:
binaryextensions: 2.3.0
editions: 1.3.4
textextensions: 2.6.0
dev: false
/iterm2-version/4.2.0:
resolution: {integrity: sha512-IoiNVk4SMPu6uTcK+1nA5QaHNok2BMDLjSl5UomrOixe5g4GkylhPwuiGdw00ysSCrXAKNMfFTu+u/Lk5f6OLQ==}
engines: {node: '>=8'}
@@ -24372,6 +24783,14 @@ packages:
uc.micro: 1.0.6
dev: true
/linkifyjs/2.1.9:
resolution: {integrity: sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug==}
peerDependencies:
jquery: '>= 1.11.0'
react: '>= 0.14.0'
react-dom: '>= 0.14.0'
dev: false
/listenercount/1.0.1:
resolution: {integrity: sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==}
dev: true
@@ -24542,6 +24961,10 @@ packages:
/lodash.isboolean/3.0.3:
resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
/lodash.isequal/4.5.0:
resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
dev: false
/lodash.isinteger/4.0.4:
resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
@@ -24738,7 +25161,6 @@ packages:
/lz-string/1.4.4:
resolution: {integrity: sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==}
hasBin: true
dev: true
/magic-string/0.25.9:
resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
@@ -27095,7 +27517,6 @@ packages:
/outvariant/1.3.0:
resolution: {integrity: sha512-yeWM9k6UPfG/nzxdaPlJkB2p08hCg4xP6Lx99F+vP8YF7xyZVfTmJjrrNalkmzudD4WFvNLVudQikqUmF8zhVQ==}
dev: true
/p-cancelable/1.1.0:
resolution: {integrity: sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==}
@@ -29270,6 +29691,12 @@ packages:
- vue-template-compiler
dev: true
/react-devtools-inline/4.4.0:
resolution: {integrity: sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==}
dependencies:
es6-symbol: 3.1.3
dev: false
/react-dom/18.2.0_react@18.2.0:
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
peerDependencies:
@@ -29311,12 +29738,21 @@ packages:
shallowequal: 1.1.0
dev: true
/react-inspector/5.1.1:
resolution: {integrity: sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg==}
peerDependencies:
react: ^16.8.4 || ^17.0.0
dependencies:
'@babel/runtime': 7.20.7
is-dom: 1.1.0
prop-types: 15.8.1
dev: false
/react-is/16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
/react-is/17.0.2:
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
dev: true
/react-is/18.2.0:
resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
@@ -30948,7 +31384,6 @@ packages:
/source-map/0.5.7:
resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
engines: {node: '>=0.10.0'}
dev: true
/source-map/0.6.1:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -31243,6 +31678,10 @@ packages:
events: 3.3.0
dev: true
/strict-event-emitter/0.4.6:
resolution: {integrity: sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==}
dev: false
/strict-uri-encode/2.0.0:
resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
engines: {node: '>=4'}
@@ -31447,6 +31886,10 @@ packages:
webpack: 5.75.0
dev: false
/style-mod/4.0.0:
resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}
dev: false
/style-to-object/0.3.0:
resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==}
dependencies:
@@ -32105,6 +32548,11 @@ packages:
/text-table/0.2.0:
resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
/textextensions/2.6.0:
resolution: {integrity: sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==}
engines: {node: '>=0.8'}
dev: false
/thenby/1.3.4:
resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==}
dev: true
@@ -32687,8 +33135,8 @@ packages:
resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
dev: false
/typedoc-plugin-markdown/4.0.0-next.1_typedoc@0.23.24:
resolution: {integrity: sha512-aRvW7xmT6OGQx/FLfXGEGs8yQuF+VOp6VBefivWaZz0ylPkXSSC3mc+vQIuaASzuiD0q6KZ+BvwXvE5dVA/e1Q==}
/typedoc-plugin-markdown/4.0.0-next.3_typedoc@0.23.24:
resolution: {integrity: sha512-Koim98xkXOoY8KPlMNH/cKTfqTEocVEYMa3XZgoPX/DkGp7ioB6nl38p6Snl7rEmhcbHkFktcUoOQLn04Kk3sg==}
peerDependencies:
typedoc: '>=0.23.0'
dependencies:
@@ -34005,6 +34453,10 @@ packages:
browser-process-hrtime: 1.0.0
dev: true
/w3c-keyname/2.2.6:
resolution: {integrity: sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==}
dev: false
/w3c-xmlserializer/2.0.0:
resolution: {integrity: sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==}
engines: {node: '>=10'}