Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions client/www/app/docs/auth/apple/[[...tab]]/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Instant supports Sign In with Apple on the Web and in native applications.
{% nav-group %}
{% nav-button param="method" value="web-popup" title="Web Popup (recommended)" description="Use Apple-provided popup to authenticate users" /%}
{% nav-button param="method" value="web-redirect" title="Web Redirect" description="Use redirect flow to authenticate users" /%}
{% nav-button param="method" value="native" title="React Native" description="Authenticating in React Native app" /%}
{% nav-button param="method" value="native" title="React Native" description="Authenticate in a React Native app" /%}
{% /nav-group %}

## Step 1: Create App ID
Expand All @@ -38,12 +38,12 @@ Instant supports Sign In with Apple on the Web and in native applications.

## Step 3: Configure Services ID (Web Popup flow)

- Select newly created Services ID
- Select the newly created Services ID
- Enable _Sign In with Apple_
- Click _Configure_
- Select _Primary App ID_ from Step 1
- To _Domains_, add your app domain (e.g. `myapp.com`)
- To _Return URLs_, add URL of your app where authentication happens (e.g. `https://myapp.com/signin`)
- To _Return URLs_, add the URL of your app where authentication happens (e.g. `https://myapp.com/signin`)
- Click _Continue_ → _Save_

{% /conditional %}
Expand All @@ -52,7 +52,7 @@ Instant supports Sign In with Apple on the Web and in native applications.

## Step 3: Configure Services ID (Web Redirect flow)

- Select newly created Services ID
- Select the newly created Services ID
- Enable _Sign In with Apple_
- Click _Configure_
- Select _Primary App ID_ from Step 1
Expand Down Expand Up @@ -231,7 +231,7 @@ const authUrl = db.auth.createAuthorizationURL({
});
```

Add a link uses `authUrl`:
Add a link that uses `authUrl`:

```
<a href={ authUrl }>Sign In with Apple</a>
Expand All @@ -244,7 +244,7 @@ That’s it!

## Step 5: Add Sign In code to your app (React Native flow)

Instant comes with support for [Expo AppleAuthentication library](https://docs.expo.dev/versions/latest/sdk/apple-authentication/).
Instant comes with support for the [Expo AppleAuthentication library](https://docs.expo.dev/versions/latest/sdk/apple-authentication/).

Add dependency:

Expand Down
6 changes: 3 additions & 3 deletions client/www/app/docs/auth/clerk/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ You can have additional claims as long as the `email` claim is set to `{{user.pr

On the Clerk dashboard, navigate to [`API keys`](https://dashboard.clerk.com/last-active?path=api-keys), then copy the `Publishable key`. It should start with `pk_`.

**Step 3: Register your Clerk Publishable key with your instant app**
**Step 3: Register your Clerk Publishable key with your Instant app**

{% setup-paths %}

Expand All @@ -55,9 +55,9 @@ npx instant-cli@latest auth client add \

Use Clerk's `getToken` helper to get a session JWT for your signed-in user. Then call Instant's `db.auth.signInWithIdToken` with the JWT and the client name you set on the Instant dashboard.

When you call `db.auth.signInWithIdToken`, Instant will verify that the JWT was signed by your Clerk app. If verified, Instant will use the email in the JWT's claims to lookup your user or create a new one and create a long-lived session. Be sure to call Instant's `db.auth.signOut` when you want to sign the user out.
When you call `db.auth.signInWithIdToken`, Instant will verify that the JWT was signed by your Clerk app. If verified, Instant will use the email in the JWT's claims to look up your user or create a new one and create a long-lived session. Be sure to call Instant's `db.auth.signOut` when you want to sign the user out.

Here is a full example using clerk's next.js library:
Here is a full example using Clerk's Next.js library:

```javascript {% showCopy=true %}
'use client';
Expand Down
6 changes: 3 additions & 3 deletions client/www/app/docs/auth/firebase/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ Instant supports delegating auth to Firebase Auth.

**Step 1: Get your Firebase Project ID**

On the [Firebase dashboard](https://console.firebase.google.com/), open your project and navigate to navigate to `Project Overview` > `⚙` > `Project Settings`, then copy the `Project ID`.
On the [Firebase dashboard](https://console.firebase.google.com/), open your project and navigate to `Project Overview` > `⚙` > `Project Settings`, then copy the `Project ID`.

**Step 2: Register your Firebase Project ID with your instant app**
**Step 2: Register your Firebase Project ID with your Instant app**

{% setup-paths %}

Expand All @@ -38,7 +38,7 @@ npx instant-cli@latest auth client add \

Use Firebase's `getIdToken` helper to get a JWT for your signed-in user. Then call Instant's `db.auth.signInWithIdToken` with the JWT and the client name you set on the Instant dashboard.

When you call `db.auth.signInWithIdToken`, Instant will verify that the JWT was signed by your Firebase app. If verified, Instant will use the email in the JWT's claims to lookup your user or create a new one and create a long-lived session. Be sure to call Instant's `db.auth.signOut` when you want to sign the user out.
When you call `db.auth.signInWithIdToken`, Instant will verify that the JWT was signed by your Firebase app. If verified, Instant will use the email in the JWT's claims to look up your user or create a new one and create a long-lived session. Be sure to call Instant's `db.auth.signOut` when you want to sign the user out.

Here is a full example:

Expand Down
6 changes: 3 additions & 3 deletions client/www/app/docs/auth/github-oauth/[[...tab]]/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ And voila, you are connected!

**Method: Web Redirect**

Create an authorization URL via `db.auth.createAuthorizationURL` and then use the url to create a link. Here's a full example:
Create an authorization URL via `db.auth.createAuthorizationURL` and then use the URL to create a link. Here's a full example:

```jsx {% showCopy=true %}
'use client';
Expand Down Expand Up @@ -204,7 +204,7 @@ Update your app.json with your scheme:

**Register your app with Instant**

Now that you have your App Scheme, it's time to tell Instant about it. For development with expo, add `exp://` and your scheme (e.g. `mycoolredirect://`) as redirect origins.
Now that you have your App Scheme, it's time to tell Instant about it. For development with Expo, add `exp://` and your scheme (e.g. `mycoolredirect://`) as redirect origins.

{% setup-paths %}

Expand All @@ -229,7 +229,7 @@ npx instant-cli@latest auth origin add --type custom-scheme --scheme mycoolredir

**Use AuthSession to log in with GitHub!**

And from here you're ready to add a login button to your expo app! Here's a full example:
And from here you're ready to add a login button to your Expo app! Here's a full example:

```jsx {% showCopy=true %}
import { View, Text, Button } from 'react-native';
Expand Down
44 changes: 22 additions & 22 deletions client/www/app/docs/auth/google-oauth/[[...tab]]/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Choose the option that sounds best to you, and the rest of the document will sho
recommended=true /%}
{% nav-button
title="Web Redirect"
description="Easier to integrate, but requires a redirect rule to render your custom app name."
description="Easier to integrate but requires a redirect rule to render your custom app name."
param="method"
value="web-redirect" /%}
{% /div %}
Expand All @@ -34,7 +34,7 @@ Choose the option that sounds best to you, and the rest of the document will sho
{% div className="grid grid-cols-2 md:grid-cols-1 md:grid-rows-2 flex-1 gap-4" %}
{% nav-button
title="Native Auth"
description="Use a 'react-native-google-signin', to integrate with the native Google iOS and Android flows. Lets you render your custom app name in the consent screen"
description="Use react-native-google-signin to integrate with the native Google iOS and Android flows and render your custom app name in the consent screen."
param="method"
value="rn-native"
recommended=true /%}
Expand All @@ -52,11 +52,11 @@ Choose the option that sounds best to you, and the rest of the document will sho

There are three main steps:

1. **Google Console**: Set up your consent screen and create an Oauth client.
2. **Instant Dashboard**: Connect your Oauth client to Instant
1. **Google Console**: Set up your consent screen and create an OAuth client.
2. **Instant Dashboard**: Connect your OAuth client to Instant
3. **Your app**: Add some code to log in with Google!

Let's dive deeper in each step:
Let's dive deeper into each step:

{% conditional
param="method"
Expand Down Expand Up @@ -102,7 +102,7 @@ Developer credentials are meant only for local development. You're limited to 10

{% /conditional %}

## 1. Set up your consent screen and create an Oauth client
## 1. Set up your consent screen and create an OAuth client

Head on over to {% blank-link href="https://console.cloud.google.com/apis/credentials" label="Google Console" /%}. You should be in the "Credentials" section.

Expand Down Expand Up @@ -134,11 +134,11 @@ Head on over to {% blank-link href="https://console.cloud.google.com/apis/creden

<!-- prettier-ignore-end -->

And with that you have your Oauth client!
And with that you have your OAuth client!

{% callout type="note" %}

Save your Client ID and your Client Secret -- you'll need it for the next step!
Save your Client ID and your Client Secret -- you'll need them for the next step!

{% /callout %}

Expand All @@ -148,7 +148,7 @@ Save your Client ID and your Client Secret -- you'll need it for the next step!
param="method"
value=["rn-native"] %}

For native auth, each platform needs an Oauth Client. If you support both iOS or Android for example, you'll create two clients. Here are the steps:
For native auth, each platform needs an OAuth Client. If you support both iOS and Android, for example, you'll create two clients. Here are the steps:

- From Google Console, click "+ CREATE CREDENTIALS"
- Select "OAuth client ID"
Expand All @@ -159,19 +159,19 @@ And with that you're ready!

{% callout type="note" %}

Save your Client IDs -- you'll need it for the next step!
Save your Client IDs -- you'll need them for the next step!

{% /callout %}

{% /conditional %}

## 2. Connect your Oauth client to Instant
## 2. Connect your OAuth client to Instant

{% conditional
param="method"
value=["web-google-button", "web-redirect", "rn-web"] %}

**Add your Oauth Client on Instant**
**Add your OAuth Client on Instant**

{% setup-paths %}

Expand Down Expand Up @@ -233,9 +233,9 @@ npx instant-cli@latest auth origin add --type website --url <your-domain>
param="method"
value=["rn-native"] %}

**Add your Oauth Client on Instant**
**Add your OAuth Client on Instant**

For each Oauth Client you created, add it to Instant:
For each OAuth Client you created, add it to Instant:

{% setup-paths %}

Expand Down Expand Up @@ -353,7 +353,7 @@ function Login() {

**Not using React?**

If you're not using React or prefer to embed the button yourself, refer to {% blank-link href="https://developers.google.com/identity/gsi/web/guides/overview" label="Google's docs" /%} on how to create the button and load their client library
If you're not using React or prefer to embed the button yourself, refer to {% blank-link href="https://developers.google.com/identity/gsi/web/guides/overview" label="Google's docs" /%} on how to create the button and load their client library.

When creating your button, make sure to set the `data-ux_mode="popup"`. Your `data-callback` function should look like:

Expand All @@ -375,9 +375,9 @@ async function handleSignInWithGoogle(response) {

**Method: Web Redirect**

If you don't want to use the google styled buttons, you can use the redirect flow instead.
If you don't want to use the Google-styled buttons, you can use the redirect flow instead.

Create an authorization URL via `db.auth.createAuthorizationURL` and then use the url to create a link. Here's a full example:
Create an authorization URL via `db.auth.createAuthorizationURL` and then use the URL to create a link. Here's a full example:

```jsx {% showCopy=true %}
'use client';
Expand Down Expand Up @@ -460,7 +460,7 @@ Update your app.json with your scheme:

**Register your app with Instant**

Now that you have your App Scheme, it's time to tell Instant about it. For development with expo, add `exp://` and your scheme (e.g. `mycoolredirect://`) as redirect origins.
Now that you have your App Scheme, it's time to tell Instant about it. For development with Expo, add `exp://` and your scheme (e.g. `mycoolredirect://`) as redirect origins.

{% setup-paths %}

Expand All @@ -485,7 +485,7 @@ npx instant-cli@latest auth origin add --type custom-scheme --scheme mycoolredir

**Use AuthSession to log in with Google!**

And from here you're ready to add a login button to your expo app! Here's a full example
And from here you're ready to add a login button to your Expo app! Here's a full example:

```jsx {% showCopy=true %}
import { View, Text, Button, StyleSheet } from 'react-native';
Expand Down Expand Up @@ -573,7 +573,7 @@ export default App;

**Method: Native Auth**

You can use [react-native-google-signin/google-signin](https://github.com/react-native-google-signin/google-signin), to authenticate natively on Google.
You can use [react-native-google-signin/google-signin](https://github.com/react-native-google-signin/google-signin) to authenticate natively on Google.

There are three steps:

Expand All @@ -595,7 +595,7 @@ Then, follow the google-signin {% blank-link href="https://react-native-google-s

**Use google-signin to log in with Google!**

Now you're ready to add the Google Signin button to your expo app! Here's a full example:
Now you're ready to add the Google sign-in button to your Expo app! Here's a full example:

```jsx {% showCopy=true %}
import { View, Text, Button, StyleSheet } from 'react-native';
Expand Down Expand Up @@ -646,7 +646,7 @@ function Login() {
console.error('no ID token present!');
return;
}
// 2. Use your token, and sign into InstantDB!
// 2. Use your token to sign in to InstantDB!
try {
const res = await db.auth.signInWithIdToken({
// The unique name you gave the OAuth client when you
Expand Down
2 changes: 1 addition & 1 deletion client/www/app/docs/auth/guest-auth/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Instant supports guest authentication. This allows your users to try your app be

## Signing in as a Guest

Use `db.auth.signInAsGuest()` to create a new guest user. This will create a new guest user with an id, but no email address.
Use `db.auth.signInAsGuest()` to create a new guest user. This will create a new guest user with an ID but no email address.

You can set custom `$users` properties when creating the guest by passing `extraFields`:

Expand Down
20 changes: 10 additions & 10 deletions client/www/app/docs/auth/linkedin-oauth/[[...tab]]/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,13 @@ Choose the option that sounds best to you, and the rest of the document will sho

There are three main steps:

1. **LinkedIn Developer Console**: Create an Oauth client.
2. **Instant Dashboard**: Connect your Oauth client to Instant
1. **LinkedIn Developer Console**: Create an OAuth client.
2. **Instant Dashboard**: Connect your OAuth client to Instant
3. **Your app**: Add some code to log in with LinkedIn!

Let's dive deeper in each step:
Let's dive deeper into each step:

## 1. Create an Oauth client
## 1. Create an OAuth client

1. Head to the [LinkedIn developer portal](https://www.linkedin.com/developers/apps) and create a new application (or open an existing one).
2. In the **Auth** tab enable **Sign In with LinkedIn**.
Expand All @@ -58,13 +58,13 @@ https://api.instantdb.com/runtime/oauth/callback

{% callout type="note" %}

Save your Client ID and your Client Secret -- you'll need it for the next step!
Save your Client ID and your Client Secret -- you'll need them for the next step!

{% /callout %}

## 2. Connect your Oauth client to Instant
## 2. Connect your OAuth client to Instant

**Add your Oauth Client on Instant**
**Add your OAuth Client on Instant**

{% setup-paths %}

Expand Down Expand Up @@ -126,7 +126,7 @@ And voila, you are connected!

**Method: Web Redirect**

Create an authorization URL via `db.auth.createAuthorizationURL` and then use the url to create a link. Here's a full example:
Create an authorization URL via `db.auth.createAuthorizationURL` and then use the URL to create a link. Here's a full example:

```jsx {% showCopy=true %}
'use client';
Expand Down Expand Up @@ -209,7 +209,7 @@ Update your app.json with your scheme:

**Register your app with Instant**

Now that you have your App Scheme, it's time to tell Instant about it. For development with expo, add `exp://` and your scheme (e.g. `mycoolredirect://`) as redirect origins.
Now that you have your App Scheme, it's time to tell Instant about it. For development with Expo, add `exp://` and your scheme (e.g. `mycoolredirect://`) as redirect origins.

{% setup-paths %}

Expand All @@ -234,7 +234,7 @@ npx instant-cli@latest auth origin add --type custom-scheme --scheme mycoolredir

**Use AuthSession to log in with LinkedIn!**

And from here you're ready to add a login button to your expo app! Here's a full example
And from here you're ready to add a login button to your Expo app! Here's a full example:

```jsx {% showCopy=true %}
import { View, Text, Button, StyleSheet } from 'react-native';
Expand Down
8 changes: 4 additions & 4 deletions client/www/app/docs/auth/magic-codes/[[...tab]]/page.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Choose the platform you're building for to see a full example.
value="react-native" /%}
{% nav-button
title="Vanilla JS"
description="For non-react based frameworks"
description="For non-React-based frameworks"
param="platform"
value="vanilla" /%}
{% /div %}
Expand Down Expand Up @@ -414,11 +414,11 @@ Make sure you have a `<div id="app"></div>` element in your HTML.

**Let's dig deeper.**

We created a login flow to handle magic code auth. Of note is `auth.sendMagicCode`
We created a login flow to handle magic code auth. Of note are `auth.sendMagicCode`
and `auth.signInWithMagicCode`.

On successful validation, Instant's backend will return a user object with a refresh token.
The client SDK will then restart the websocket connection with Instant's sync layer and provide the refresh token.
The client SDK will then restart the WebSocket connection with Instant's sync layer and provide the refresh token.

When doing queries or transactions, the refresh token will be used to hydrate `auth`
on the backend during permission checks.
Expand All @@ -434,7 +434,7 @@ db.auth.sendMagicCode({ email }).catch((err) => {
});
```

Use `auth.sendMagicCode` to generate a magic code on instant's backend and email it to the user.
Use `auth.sendMagicCode` to generate a magic code on Instant's backend and email it to the user.

## Sign in with Magic Code

Expand Down
Loading
Loading