LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-09 12:27:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: move example to stackblitz

Browse Source
This commit is contained in:
Bereket Engida
2024-09-28 01:53:01 +03:00
parent e6744ba53a
commit 1ff5f3d06f
10 changed files with 75 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/fork-button.tsx
View File

@@ -9,7 +9,7 @@ export function ForkButton({ url }: { url: string }) {
<Link href={`https://codesandbox.io/p/github/${url}`} target="_blank">
<Button className="gap-2" variant="outline" size="sm">
<ExternalLink size={12} />
Fork
Open in Stackblitz
</Button>
</Link>
<Link href={`https://github.com/${url}`} target="_blank">

7
docs/content/docs/examples/astro.mdx
View File

@@ -3,16 +3,15 @@ title: Astro example
descirption: Better auth astro example
---
This is an example of how to use Better Auth with Astro. It uses Solid for buildng the components.
This is an example of how to use Better Auth with Astro. It uses Solid for building the components.
**Implements the following features:**
Email & Password . Social Sign-in with Google . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management
<ForkButton url="better-auth/better-auth/tree/main/examples/astro-example" />
<ForkButton url="better-auth/better-auth/examples/astro-example" />
<iframe src="https://codesandbox.io/p/github/better-auth/better-auth/tree/main/examples/astro-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
<iframe src="https://stackblitz.com/github/better-auth/better-auth/tree/main/examples/astro-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
style={{
width: "100%",
height: "500px",

6
docs/content/docs/examples/next-js.mdx
View File

@@ -6,13 +6,13 @@ descirption: Better auth next js example
This is an example of how to use Better Auth with Next.
**Implements the following features:**
Email & Password . Social Sign-in . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management . Oragnization, Members and Roles
Email & Password . Social Sign-in . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management . Organizaition, Members and Roles
See [Demo](https://demo.better-auth.com)
<ForkButton url="better-auth/better-auth/examples/nextjs-example" />
<ForkButton url="better-auth/better-auth/tree/main/examples/nextjs-example" />
<iframe src="https://codesandbox.io/p/github/better-auth/better-auth/tree/main/examples/nextjs-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
<iframe src="https://stackblitz.com/github/better-auth/better-auth/tree/main/examples/nextjs-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
style={{
width: "100%",
height: "500px",

4
docs/content/docs/examples/nuxt.mdx
View File

@@ -8,10 +8,10 @@ This is an example of how to use Better Auth with Nuxt
**Implements the following features:**
Email & Password . Social Sign-in with Google
<ForkButton url="better-auth/better-auth/examples/nux-example" />
<ForkButton url="better-auth/better-auth/tree/main/examples/nuxt-example" />
<iframe src="https://codesandbox.io/p/github/better-auth/better-auth/tree/main/examples/nuxt-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
<iframe src="https://stackblitz.com/github/better-auth/better-auth/tree/main/examples/nuxt-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
style={{
width: "100%",
height: "500px",

8
docs/content/docs/examples/svelte-kit.mdx
View File

@@ -6,12 +6,11 @@ descirption: Better auth Svelte Kit example
This is an example of how to use Better Auth with Svelte Kit.
**Implements the following features:**
Email & Password . <u>Social Sign-in with Google</u> . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management
<u>Email & Password</u> . <u>Social Sign-in with Google</u> . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management
<ForkButton url="better-auth/better-auth/tree/main/examples/nuxt-example" />
<ForkButton url="better-auth/better-auth/examples/svlete-kit-example" />
<iframe src="https://codesandbox.io/p/github/better-auth/better-auth/tree/main/examples/svlte-kit-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
<iframe src="https://stackblitz.com/github/better-auth/better-auth/tree/main/examples/svlte-kit-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
style={{
width: "100%",
height: "500px",
@@ -35,4 +34,3 @@ This is an example of how to use Better Auth with Svelte Kit.
pnpm dev
```
4. Open the browser and navigate to `http://localhost:3000`

65
examples/astro-example/README.md
View File

@@ -1,47 +1,26 @@
# Astro Starter Kit: Minimal
# Astro Example
```sh
npm create astro@latest -- --template minimal
This is an example of how to use Better Auth with Astro. It uses Solid for building the components.
**Implements the following features:**
Email & Password . Social Sign-in with Google . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management
## How to run
1. Clone the code sandbox (or the repo) and open it in your code editor
2. Provide .env file with the following variables
```txt
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
BETTER_AUTH_SECRET=
```
//if you don't have these, you can get them from the google developer console. If you don't want to use google sign-in, you can remove the google config from the `auth.ts` file.
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.json
3. Run the following commands
```bash
pnpm install
pnpm run dev
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
4. Open the browser and navigate to `http://localhost:3000`

43
examples/nextjs-example/README.md
View File

@@ -1,36 +1,19 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
# Better Auth Next js example
## Getting Started
This is an example of how to use Better Auth with Next.
First, run the development server:
**Implements the following features:**
Email & Password . Social Sign-in . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management . Organization, Members and Roles
## How to run
1. Clone the code sandbox (or the repo) and open it in your code editor
2. Move .env.example to .env and provide necessary variables
3. Run the following commands
```bash
npm run dev
# or
yarn dev
# or
pnpm install
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
4. Open the browser and navigate to `http://localhost:3000`

79
examples/nuxt-example/README.md
View File

@@ -1,75 +1,18 @@
# Nuxt 3 Minimal Starter
# Nuxt Js Better Auth Example
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
## Setup
This is an example of how to use Better Auth with Nuxt
Make sure to install the dependencies:
**Implements the following features:**
Email & Password . Social Sign-in with Google
## How to run
1. Clone the code sandbox (or the repo) and open it in your code editor
2. Move .env.example to .env and provide necessary variables
3. Run the following commands
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
pnpm dev
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
4. Open the browser and navigate to `http://localhost:3000`

4
examples/svelte-kit-example/.env.example Normal file
View File

@@ -0,0 +1,4 @@
BETTER_AUTH_SECRET=
BETTER_AUTH_URL=http://localhost:3000
GOOGLE_CLIENT_SECRET=
GOOGLE_CLIENT_ID=

43
examples/svelte-kit-example/README.md
View File

@@ -1,38 +1,19 @@
# create-svelte
# Svelte Kit Better Auth Example
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
## Creating a project
This is an example of how to use Better Auth with Svelte Kit.
If you're seeing this, you've probably already done this step. Congrats!
**Implements the following features:**
Email & Password . <u>Social Sign-in with Google</u> . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management
## How to run
1. Clone the code sandbox (or the repo) and open it in your code editor
2. Move .env.example to .env and provide necessary variables
3. Run the following commands
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
pnpm install
pnpm dev
```
4. Open the browser and navigate to `http://localhost:3000`
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.