Compare commits

...

108 Commits

Author SHA1 Message Date
Szilárd Dóró
31cc558492 Merge pull request #610 from nhost/changeset-release/main
chore: update versions
2022-05-31 10:42:25 +02:00
github-actions[bot]
b6817f4c55 chore: update versions 2022-05-31 08:39:18 +00:00
Szilárd Dóró
41823e143f Merge pull request #633 from nhost/fix/bundling-follow-up
Package build improvements
2022-05-31 10:37:33 +02:00
Szilárd Dóró
8b69be1baa changeset wording improvements 2022-05-31 10:32:17 +02:00
Szilárd Dóró
bc11c9e56a build related fixes: warnings, copying on Windows 2022-05-31 10:30:30 +02:00
Johan Eliasson
b942420b07 Merge pull request #621 from nhost/docs-auth-4
Docs: Authentication
2022-05-31 09:58:13 +02:00
Johan Eliasson
abbbf0b059 correct variables 2022-05-31 09:56:51 +02:00
Johan Eliasson
6121d2be45 updates 2022-05-31 09:52:46 +02:00
Johan Eliasson
6e8a3c9b56 nice looking directory tree 2022-05-31 09:50:06 +02:00
Szilárd Dóró
601e0237ed Merge pull request #623 from nhost/fix/esm-bundling
fix: Package bundling / Node.js environment
2022-05-31 09:40:28 +02:00
Johan Eliasson
7ccd051a41 info about custom permission variables 2022-05-31 09:39:19 +02:00
Johan Eliasson
7f7eebd75e jwt clarification 2022-05-31 09:34:50 +02:00
Pilou
24833db254 Merge pull request #631 from nhost/628-docker-compose-file-not-working-with-nhosthasura-storage-v020
fix: docker-compose with hasura-storage 0.2
2022-05-31 08:49:52 +02:00
Pierre-Louis Mercereau
6f970ec18d fix: docker-compose with hasura-storage 0.2 2022-05-31 08:41:03 +02:00
Johan Eliasson
fe158a5334 Merge pull request #630 from nhost/contributors-readme-action-lw_Njvj3EE
contributors readme action update
2022-05-31 07:41:52 +02:00
github-actions[bot]
05fd36ce75 contrib-readme-action has updated readme 2022-05-31 05:35:53 +00:00
Johan Eliasson
e19818b262 Merge pull request #629 from atapas/patch-1
Corrected the yarn switch for installing express
2022-05-31 07:35:39 +02:00
Tapas Adhikary
dac7e16249 Corrected the yarn switch for installing express
The switch for yarn should `D`, not `d`.
2022-05-31 10:04:21 +05:30
Pilou
4708c36a05 Merge pull request #627 from nhost/contributors-readme-action-baAdE7ragJ
contributors readme action update
2022-05-30 23:01:17 +02:00
github-actions[bot]
a1f4e9146a contrib-readme-action has updated readme 2022-05-30 20:47:17 +00:00
Pilou
b0d0577800 Merge pull request #626 from nbourdin/patch-1
Update serverless-functions.mdx
2022-05-30 22:47:04 +02:00
Nicolas Bourdin
74a7feed45 Update serverless-functions.mdx 2022-05-30 22:42:10 +02:00
Szilárd Dóró
2b2f8e91ae fixed bundling of packages to support Node.js environment 2022-05-30 21:57:41 +02:00
Johan Eliasson
a729bc6cde Merge branch 'docs-auth-3' into docs-auth-4 2022-05-30 19:33:10 +02:00
Johan Eliasson
397748bd1f typo 2022-05-30 17:38:38 +02:00
Johan Eliasson
1026dfccb7 typos and updates 2022-05-30 17:37:52 +02:00
Johan Eliasson
e5d3066091 typo 2022-05-30 17:33:51 +02:00
Johan Eliasson
9847875752 updates 2022-05-30 17:33:26 +02:00
Johan Eliasson
8af9c880c9 correct links 2022-05-30 17:29:40 +02:00
Johan Eliasson
004c44cb80 auth docs updated 2022-05-30 17:00:57 +02:00
Szilárd Dóró
33358e88f8 Merge pull request #618 from nhost/fix/docs-highlight-background
fix: Docusaurus highlight background color
2022-05-30 15:50:22 +02:00
Pilou
40facd73f7 Merge pull request #607 from nhost/refactor/react-files
refactor: simpler and more consistent file structure in @nhost/react
2022-05-30 13:17:55 +02:00
Pierre-Louis Mercereau
028793d1a3 remove unnecessary useMemo 2022-05-30 11:37:15 +02:00
Pierre-Louis Mercereau
bc4c20592e export hook result interfaces 2022-05-30 11:35:51 +02:00
Szilárd Dóró
023a3cbef2 fix: Docusaurus highlight background color 2022-05-30 09:12:27 +02:00
Johan Eliasson
a8490b5a52 Merge pull request #613 from nhost/docs-react-clarification
Docs: React protected route clarification
2022-05-29 21:46:04 +02:00
Johan Eliasson
e390f99c43 updates 2022-05-29 19:21:14 +02:00
Johan Eliasson
0a9143a5b8 docs clarification 2022-05-29 19:13:36 +02:00
Johan Eliasson
4e9a47d229 Merge pull request #612 from nhost/contributors-readme-action-hUP1378npl
contributors readme action update
2022-05-29 18:50:47 +02:00
github-actions[bot]
fbec804d9e contrib-readme-action has updated readme 2022-05-29 15:34:04 +00:00
Pilou
a815678379 Merge pull request #611 from MelodicCrypter/MelodicCrypter-fix-docs-authentication-typo
Fixed typo error in Authentication/sign-in-methods page
2022-05-29 17:33:49 +02:00
Hugh Caluscusin
a2d4530e8a Fixed typo error 2022-05-29 21:49:19 +08:00
Pilou
c8b0269d6f Merge pull request #609 from nhost/feat/admin-secret
feat: new `adminSecret` option
2022-05-27 21:50:55 +02:00
Pierre-Louis Mercereau
2eed249826 post-review 2022-05-27 20:23:54 +02:00
Pierre-Louis Mercereau
88c74cc059 fix: add missing param 2022-05-27 19:37:02 +02:00
Pierre-Louis Mercereau
858014e42a feat: new adminSecret option 2022-05-27 19:12:39 +02:00
Pierre-Louis Mercereau
16b15802c7 chore: lint fix and clean 2022-05-27 09:59:45 +02:00
Pierre-Louis Mercereau
1a6201f327 refactor: simpler and more consistent file structure
Keep the same logic as in Vue: 1 hook = 1 file, file name = hook name
2022-05-26 23:08:18 +02:00
Johan Eliasson
cb1560594b Merge pull request #604 from nhost/package-readmes
basic package readmes
2022-05-25 11:13:06 +02:00
Pierre-Louis Mercereau
6fa70a6202 correct copy-paste 2022-05-25 09:31:04 +02:00
Pierre-Louis Mercereau
93b6daf486 basic package readmes 2022-05-24 20:47:42 +02:00
Johan Eliasson
b35936c230 Merge pull request #596 from nhost/docs-graphql
docs: GraphQL, Permissions, GitHub Integration, Environment Variables
2022-05-24 14:17:00 +02:00
Johan Eliasson
45e536a1de docs improvements 2022-05-24 14:06:50 +02:00
Johan Eliasson
cb3b9d4c79 Merge pull request #600 from nhost/elitan-patch-2
Update README.md
2022-05-24 13:01:33 +02:00
Johan Eliasson
865f052674 Update README.md 2022-05-24 09:20:00 +02:00
Johan Eliasson
401fc2db9b Merge pull request #599 from nhost/oss-tagline
README updates
2022-05-24 09:15:30 +02:00
Johan Eliasson
00a641d20a header fix 2022-05-24 09:15:08 +02:00
Pilou
a64284a028 Merge pull request #598 from nhost/elitan-patch-2
Update vercel.json
2022-05-24 08:56:13 +02:00
Johan Eliasson
1fd42677a8 headers update 2022-05-23 22:28:16 +02:00
Johan Eliasson
0851a0a53d README updates 2022-05-23 22:25:27 +02:00
Johan Eliasson
3122c5e726 Update vercel.json 2022-05-23 22:16:37 +02:00
Johan Eliasson
f38a831405 updated env vars docs 2022-05-23 22:07:21 +02:00
Johan Eliasson
3a18239c71 workdings and headers 2022-05-23 21:47:00 +02:00
Johan Eliasson
4952cc9d7b small updates 2022-05-23 21:20:05 +02:00
Johan Eliasson
b13ddd087e updates 2022-05-23 21:18:46 +02:00
Johan Eliasson
01e9b609cf Merge pull request #597 from nhost/contributors-readme-action-ui0UBmK5hr
contributors readme action update
2022-05-23 21:03:33 +02:00
Johan Eliasson
d1068ea78a added github integration docs 2022-05-23 21:02:54 +02:00
github-actions[bot]
793672fd3d contrib-readme-action has updated readme 2022-05-23 18:13:47 +00:00
Johan Eliasson
577a108329 Merge pull request #595 from nhost/docs/add-missing-links
docs: add missing links
2022-05-23 20:13:31 +02:00
Johan Eliasson
7e49829d81 updates 2022-05-23 17:25:04 +02:00
Pierre-Louis Mercereau
b64fa32c8a docs: add missing links 2022-05-23 11:53:12 +02:00
Pilou
c63aaaf5ce Merge pull request #590 from Sonichigo/patch-1
fixed typo in documentation
2022-05-23 09:45:04 +02:00
Pilou
110ce6414c Merge pull request #593 from nhost/contributors-readme-action--vk6xBLD4J
contributors readme action update
2022-05-23 09:27:59 +02:00
Pilou
4df37cdefa Merge pull request #591 from nhost/contributors-readme-action-8a6nvMV_es
contributors readme action update
2022-05-23 09:27:11 +02:00
github-actions[bot]
d7a9e5c150 contrib-readme-action has updated readme 2022-05-23 07:26:53 +00:00
Pilou
c3bede4051 Merge pull request #592 from nhost/changeset-release/main
chore: update versions
2022-05-23 09:26:36 +02:00
github-actions[bot]
e2e87bd0b2 chore: update versions 2022-05-23 07:20:25 +00:00
github-actions[bot]
2270983eb9 contrib-readme-action has updated readme 2022-05-23 07:19:46 +00:00
Pilou
c6bc105a6c Merge pull request #589 from heygambo/feat/vue
🐛 imports from @apollo/client/core for vue
2022-05-23 09:19:31 +02:00
Pierre-Louis Mercereau
097e304f9f reflect changes in missing files and add changeset 2022-05-23 09:14:42 +02:00
Animesh Pathak
17ad0a21cc fixed typo in documentation 2022-05-23 06:59:04 +05:30
Christian Gambardella
fb34967ea6 🐛 imports from @apollo/client/core for vue
This fixes a bug where it's required to have react in a vue project.
@apollo/client exports code related to react.
@apollo/client/core does not not.

Ref: https://github.com/apollographql/apollo-client/blob/main/src/index.ts
2022-05-23 00:28:57 +02:00
Johan Eliasson
0f574d4c30 graphql first draft 2022-05-22 21:54:50 +02:00
Johan Eliasson
20ab24d227 Merge pull request #588 from nhost/contributors-readme-action-ABARDipKaO
contributors readme action update
2022-05-22 08:53:16 +02:00
github-actions[bot]
efd31f4bce contrib-readme-action has updated readme 2022-05-22 06:52:14 +00:00
Johan Eliasson
30da899832 Merge pull request #587 from leothorp/patch-1
Fix broken README.md doc links
2022-05-22 08:52:01 +02:00
Leo Thorp
d14b0d4644 Fix broken README.md doc links 2022-05-21 17:23:25 -05:00
Johan Eliasson
51d742b12c Merge pull request #581 from nhost/docs-database
Docs: Database and Event Triggers
2022-05-20 22:10:08 +02:00
Pilou
4f9b34a6a0 Merge pull request #585 from nhost/contributors-readme-action-H5QVIVxSRf
contributors readme action update
2022-05-20 21:56:19 +02:00
github-actions[bot]
640d4521e2 contrib-readme-action has updated readme 2022-05-20 19:54:39 +00:00
Pilou
8003dfed8b Merge pull request #573 from nhost/docs-structure
Docs: Top menu structure change
2022-05-20 21:54:24 +02:00
Johan Eliasson
972af7bab1 added base dir redirect 2022-05-20 21:40:24 +02:00
Johan Eliasson
2c35b02c83 Merge branch 'main' into docs-structure 2022-05-20 21:38:09 +02:00
Johan Eliasson
c8c2f50fca added redirects to blog posts 2022-05-20 21:36:42 +02:00
Johan Eliasson
3ef786392b more small updates 2022-05-20 16:12:23 +02:00
Johan Eliasson
b4b3c5edc2 small updates 2022-05-20 16:06:41 +02:00
Johan Eliasson
02fb3eaa91 event trigger updates 2022-05-20 14:01:14 +02:00
Johan Eliasson
a5c21ed9f8 fix2 2022-05-20 10:14:50 +02:00
Johan Eliasson
a36843296a fix 2022-05-20 10:14:16 +02:00
Johan Eliasson
318b0c8d54 db updates 2022-05-20 09:05:48 +02:00
Johan Eliasson
2a684d3f84 Merge pull request #580 from nhost/fix/docgen-multiline-description
fix: Auto-generated documentation descriptions
2022-05-20 08:58:26 +02:00
Johan Eliasson
0e870ad971 redirect cli URLs 2022-05-20 07:55:52 +02:00
Szilárd Dóró
1521572f5f fixed #559
- Fixed typos in docs
- Updated wording of some TSDocs
2022-05-19 16:05:03 +02:00
Johan Eliasson
083dc4865b Merge branch 'main' into docs-structure 2022-05-19 14:12:55 +02:00
Johan Eliasson
29229734f0 actually, the URLs are the same :D 2022-05-19 14:08:39 +02:00
Johan Eliasson
5e1756681c redirects for moved urls 2022-05-19 14:06:58 +02:00
Johan Eliasson
5300c09f56 link fix 2022-05-19 10:48:35 +02:00
Johan Eliasson
5c13953a2b removed Get Started menu and made the platform the main entrypoint for our docs 2022-05-19 10:36:27 +02:00
257 changed files with 4245 additions and 3178 deletions

105
README.md
View File

@@ -1,14 +1,14 @@
![Nhost](https://imgur.com/fGo6E4d.png)
![Nhost](https://i.imgur.com/FrcdOZg.png)
<div align="center">
# Nhost
<a href="https://docs.nhost.io/get-started">Quickstart</a>
<a href="https://docs.nhost.io/#quickstart">Quickstart</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="http://nhost.io/">Website</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="https://docs.nhost.io/get-started">Docs</a>
<a href="https://docs.nhost.io">Docs</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
<a href="https://nhost.io/blog">Blog</a>
<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
@@ -20,12 +20,12 @@
<hr />
</div>
**Nhost is an open-source GraphQL backend,** built with the following things in mind:
**Nhost is an open source Firebase alternative with GraphQL,** built with the following things in mind:
- Open-Source
- Developer Productivity
- SQL
- Open Source
- GraphQL
- SQL
- Great Developer Experience
Nhost consists of open source software:
@@ -47,19 +47,19 @@ Nhost consists of open source software:
Visit [https://docs.nhost.io](http://docs.nhost.io) for the complete documentation.
# How to get started
# Get Started
### Option 1: One-click deployment with Nhost (recommended)
## Option 1: Nhost Hosted Platform
1. Create [Nhost account](https://app.nhost.io) (you can use GitHub to sign up)
2. Create Nhost app
3. Done!
1. Sign in to [Nhost](https://app.nhost.io).
2. Create Nhost app.
3. Done.
### Option 2: Self-hosting
## Option 2: Self-hosting
Since Nhost is 100% open source, you can self-host the whole Nhost stack. Check out the example [docker-compose file](https://github.com/nhost/nhost/tree/main/examples/docker-compose) to self-host Nhost.
## Sign in a user and make your first GraphQL query
## Sign In and Make a Graphql Request
Install the `@nhost/nhost-js` package and start build your app:
@@ -103,6 +103,7 @@ Nhost libraries and tools
- [Nhost CLI](https://docs.nhost.io/reference/cli)
- [Nhost React](https://docs.nhost.io/reference/react)
- [Nhost Next.js](https://docs.nhost.io/reference/nextjs)
- [Nhost Vue](https://docs.nhost.io/reference/vue)
## Community ❤️
@@ -134,13 +135,6 @@ Here are some ways of contributing to making Nhost better:
<sub><b>Pilou</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/szilarddoro">
<img src="https://avatars.githubusercontent.com/u/310881?v=4" width="100;" alt="szilarddoro"/>
<br />
<sub><b>Szilárd Dóró</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/elitan">
<img src="https://avatars.githubusercontent.com/u/331818?v=4" width="100;" alt="elitan"/>
@@ -148,6 +142,13 @@ Here are some ways of contributing to making Nhost better:
<sub><b>Johan Eliasson</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/szilarddoro">
<img src="https://avatars.githubusercontent.com/u/310881?v=4" width="100;" alt="szilarddoro"/>
<br />
<sub><b>Szilárd Dóró</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/gdangelo">
<img src="https://avatars.githubusercontent.com/u/4352286?v=4" width="100;" alt="gdangelo"/>
@@ -205,14 +206,21 @@ Here are some ways of contributing to making Nhost better:
<sub><b>Subhendu Kundu</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/heygambo">
<img src="https://avatars.githubusercontent.com/u/449438?v=4" width="100;" alt="heygambo"/>
<br />
<sub><b>Christian Gambardella</b></sub>
</a>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/chrtze">
<img src="https://avatars.githubusercontent.com/u/3797215?v=4" width="100;" alt="chrtze"/>
<br />
<sub><b>Christopher Möller</b></sub>
</a>
</td></tr>
<tr>
</td>
<td align="center">
<a href="https://github.com/dbarrosop">
<img src="https://avatars.githubusercontent.com/u/6246622?v=4" width="100;" alt="dbarrosop"/>
@@ -247,15 +255,15 @@ Here are some ways of contributing to making Nhost better:
<br />
<sub><b>Mustafa Hanif</b></sub>
</a>
</td>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/timpratim">
<img src="https://avatars.githubusercontent.com/u/32492961?v=4" width="100;" alt="timpratim"/>
<br />
<sub><b>Pratim</b></sub>
</a>
</td></tr>
<tr>
</td>
<td align="center">
<a href="https://github.com/Savinvadim1312">
<img src="https://avatars.githubusercontent.com/u/16936043?v=4" width="100;" alt="Savinvadim1312"/>
@@ -278,10 +286,10 @@ Here are some ways of contributing to making Nhost better:
</a>
</td>
<td align="center">
<a href="https://github.com/heygambo">
<img src="https://avatars.githubusercontent.com/u/449438?v=4" width="100;" alt="heygambo"/>
<a href="https://github.com/Sonichigo">
<img src="https://avatars.githubusercontent.com/u/53110238?v=4" width="100;" alt="Sonichigo"/>
<br />
<sub><b>Christian Gambardella</b></sub>
<sub><b>Animesh Pathak</b></sub>
</a>
</td>
<td align="center">
@@ -290,15 +298,15 @@ Here are some ways of contributing to making Nhost better:
<br />
<sub><b>Colin Broderick</b></sub>
</a>
</td>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/dohomi">
<img src="https://avatars.githubusercontent.com/u/489221?v=4" width="100;" alt="dohomi"/>
<br />
<sub><b>Dominic Garms</b></sub>
</a>
</td></tr>
<tr>
</td>
<td align="center">
<a href="https://github.com/gaurav1999">
<img src="https://avatars.githubusercontent.com/u/20752142?v=4" width="100;" alt="gaurav1999"/>
@@ -320,12 +328,27 @@ Here are some ways of contributing to making Nhost better:
<sub><b>Hoang Do</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/MelodicCrypter">
<img src="https://avatars.githubusercontent.com/u/18341500?v=4" width="100;" alt="MelodicCrypter"/>
<br />
<sub><b>Hugh Caluscusin</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/jladuval">
<img src="https://avatars.githubusercontent.com/u/1935359?v=4" width="100;" alt="jladuval"/>
<br />
<sub><b>Jacob Duval</b></sub>
</a>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/leothorp">
<img src="https://avatars.githubusercontent.com/u/12928449?v=4" width="100;" alt="leothorp"/>
<br />
<sub><b>Leo Thorp</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/MarcelloTheArcane">
@@ -334,14 +357,20 @@ Here are some ways of contributing to making Nhost better:
<sub><b>Max Reynolds</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/nbourdin">
<img src="https://avatars.githubusercontent.com/u/5602476?v=4" width="100;" alt="nbourdin"/>
<br />
<sub><b>Nicolas Bourdin</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/ghoshnirmalya">
<img src="https://avatars.githubusercontent.com/u/6391763?v=4" width="100;" alt="ghoshnirmalya"/>
<br />
<sub><b>Nirmalya Ghosh</b></sub>
</a>
</td></tr>
<tr>
</td>
<td align="center">
<a href="https://github.com/quentin-decre">
<img src="https://avatars.githubusercontent.com/u/1137511?v=4" width="100;" alt="quentin-decre"/>
@@ -349,6 +378,14 @@ Here are some ways of contributing to making Nhost better:
<sub><b>Quentin Decré</b></sub>
</a>
</td>
<td align="center">
<a href="https://github.com/atapas">
<img src="https://avatars.githubusercontent.com/u/3633137?v=4" width="100;" alt="atapas"/>
<br />
<sub><b>Tapas Adhikary</b></sub>
</a>
</td></tr>
<tr>
<td align="center">
<a href="https://github.com/komninoschat">
<img src="https://avatars.githubusercontent.com/u/29049104?v=4" width="100;" alt="komninoschat"/>

View File

@@ -44,15 +44,16 @@ export default defineConfig({
lib: {
entry,
name: pkg.name,
fileName: 'index',
fileName: (format) => (format === 'cjs' ? `index.cjs.js` : `index.mjs`),
formats: ['cjs', 'es']
},
rollupOptions: {
external: (id) => deps.some((dep) => id.startsWith(dep)),
output: {
globals: {
'graphql/language/printer': 'graphql/language/printer',
graphql: 'graphql',
'@apollo/client': '@apollo/client',
'@apollo/client/core': '@apollo/client/core',
'@apollo/client/link/context': '@apollo/client/link/context',
'@apollo/client/link/subscriptions': '@apollo/client/link/subscriptions',
'@apollo/client/utilities': '@apollo/client/utilities',
@@ -63,7 +64,9 @@ export default defineConfig({
react: 'React',
'react-dom': 'ReactDOM',
'react/jsx-runtime': '_jsx',
'@nhost/react': '@nhost/react'
'@nhost/react': '@nhost/react',
vue: 'Vue',
'vue-demi': 'vue-demi'
}
}
}

View File

@@ -1,8 +1,6 @@
import fs from 'fs'
import path from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
import tsconfigPaths from 'vite-tsconfig-paths'
import baseLibConfig from './vite.lib.config'
@@ -13,19 +11,7 @@ const pkg = require(path.join(PWD, 'package.json'))
const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
export default defineConfig({
plugins: [
tsconfigPaths(),
dts({
exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
afterBuild: () => {
const types = fs.readdirSync(path.join(PWD, 'umd/src'))
types.forEach((file) => {
fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
})
fs.rmdirSync(path.join(PWD, 'umd/src'))
}
})
],
plugins: [tsconfigPaths()],
build: {
...(baseLibConfig.build || {}),
outDir: 'umd',

View File

@@ -1,8 +1,6 @@
import fs from 'fs'
import path from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
import tsconfigPaths from 'vite-tsconfig-paths'
import react from '@vitejs/plugin-react'
@@ -15,20 +13,7 @@ const pkg = require(path.join(PWD, 'package.json'))
const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
export default defineConfig({
plugins: [
react(),
tsconfigPaths(),
dts({
exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
afterBuild: () => {
const types = fs.readdirSync(path.join(PWD, 'umd/src'))
types.forEach((file) => {
fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
})
fs.rmdirSync(path.join(PWD, 'umd/src'))
}
})
],
plugins: [react(), tsconfigPaths()],
build: {
...(baseLibConfig.build || {}),
outDir: 'umd',

View File

@@ -1,8 +1,6 @@
import fs from 'fs'
import path from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'
import tsconfigPaths from 'vite-tsconfig-paths'
import vue from '@vitejs/plugin-vue'
@@ -15,20 +13,7 @@ const pkg = require(path.join(PWD, 'package.json'))
const deps = [...Object.keys(Object.assign({}, pkg.peerDependencies))]
export default defineConfig({
plugins: [
vue(),
tsconfigPaths(),
dts({
exclude: ['**/*.spec.ts', '**/*.test.ts', '**/tests/**'],
afterBuild: () => {
const types = fs.readdirSync(path.join(PWD, 'umd/src'))
types.forEach((file) => {
fs.renameSync(path.join(PWD, 'umd/src', file), path.join(PWD, 'umd', file))
})
fs.rmdirSync(path.join(PWD, 'umd/src'))
}
})
],
plugins: [vue(), tsconfigPaths()],
build: {
...(baseLibConfig.build || {}),
outDir: 'umd',

View File

@@ -1,125 +0,0 @@
---
title: 'Authenticate users'
slug: /get-started/authentication
---
In the previous section, you defined `select` permissions for the `public` role. You will now add `insert` and `select` permissions for authenticated users to secure your app's GraphQL API with authentication.
> Nhost's authentication service lets you deliver frictionless registration and login experiences to your users. We support most social providers and different methods such as email & password and passwordless (magic link).
---
## Insert a test user
Manually create a user by going to your app's **Users** tab (top menu) and clicking on **Add User**.
<video width="99%" loop="" muted="" playsInline="" controls="true">
<source src="/videos/add-user.mp4" type="video/mp4" />
</video>
You will now use that newly created user. We'll use this newly created user to make authenticated requests to the GraphQL API.
---
## Sign in and query data
Add the following code to sign in the new user and request the list of todos again:
```js
import { NhostClient } from '@nhost/nhost-js';
const nhost = new NhostClient({
backendUrl: 'https://[app-subdomain].nhost.run',
})(async () => {
// Sign in user
const signInResponse = await nhost.auth.signIn({
email: 'joe@example.com',
password: 'securepassword',
});
// Handle sign-in error
if (signInResponse.error) {
throw signInResponse.error;
}
// Get todos
const todos = await nhost.graphql.request(`
query {
todos {
id
created_at
name
is_completed
}
}
`);
console.log(JSON.stringify(todos.data, null, 2));
})();
```
Why is the return value `null`? Because when making GraphQL requests as an authenticated user, the `user` role is assumed.
> For authenticated requests, there is always the option to override the default `user` role with any other valid role.
To prepare our database and GraphQL API to work for signed-in users we need to do two things:
1. Add a `user_id` column to the `todos` table, so we know what todo belongs to which user.
2. Use the `user` role instead of the `public` role for permissions.
## Add `user_id` column
Before adding the `user_id` column, let's delete all existing todos.
Then add the `user_id` column as a `UUID` type. Make sure that `nullable` is **not** checked. This will ensure that all todos must have a `user_id` value.
At last, we'll create a connection between the `todos` table and the `users` table. For that, we need to do yet another two things:
1. Create a Foreign Key (FK) between `todos` and `auth.users.id`.
2. Let Hasura track the relationship between the two tables.
<video width="99%" loop="" muted="" playsInline="" controls="true">
<source src="/videos/user-id-column.mp4" type="video/mp4" />
</video>
### Create FK
Create a FK between the `auth.users.id` column and the `public.todos.user_id` column. See video above.
### Track relationship
Click on the `public` schema and track the untracked foreign key relationship. Then click on the `auth` schema and track the relationship again. See video above.
We track these relationships to create the GrpahQL relationships between the `todos` table to the `users` table and the `users` table to the `todos` table.
Ok, our `user_id` column is added and connected correctly. Let's continue with setting permissions for signed-in users.
## Permissions for signed-in users
Let us organize the permissions so it works for signed in users too.
### Remove permissions for the public role
We won't use the `public` role anymore, so let's remove all permission for that role.
![Remove public permissions from Hasura](/img/quick-start/remove-public-permissions.png)
Now we'll add permissions for the `user` role.
> Signed-in users use the `user` role by default
### Insert permission
First, we'll set the **Insert permission**.
A user can only insert `name` because all other columns will be set automatically. More specifically, `user_id` is set to the user's id making the request (`x-hasura-user-id`) and is configured in the `Column presets` section. See the image below.
![User insert permission](/img/quick-start/user-insert-permission.png)
### Select permission
For **Select permission**, set a **custom check** so users can only select todos where `user_id` is the same as their user id. In other words: users are only allowed to select their own todos. See the image below.
![User select permission](/img/quick-start/user-select-permission.png)
Now rerun the app. New todos are inserted, and only todos for the user are fetched and displayed. Your backend is successfully secured!

View File

@@ -1,4 +0,0 @@
{
"label": "CLI",
"position": 8
}

View File

@@ -1,33 +0,0 @@
---
title: 'CLI from Zero to Production'
---
In the previous tutorials, we tested various parts of Nhost, such as:
- Database
- GraphQL API
- Permission
- JavaScript SDK
- Authentication
All changes we did to our database and API happened directly in production of our Nhost app.
It's not ideal for making changes in production because you might break things, which will affect all users of your app.
Instead, it's recommended to make changes and test your app locally before deploying those changes to production.
To do changes locally, we need to have a complete Nhost app running locally, which the Nhost CLI does.
The Nhost CLI matches your production application in a local environment, this way you can make changes and test your code before deploying your changes to production.
## Recommended workflow with Nhost
1. Develop locally using the Nhost CLI.
2. Push changes to GitHub.
3. Nhost automatically applies changes to production.
## What you'll learn in this guide:
- Use the Nhost CLI to create a local environment
- Connect a GitHub repository with a Nhost app
- Deploy local changes to production

View File

@@ -1,37 +0,0 @@
---
title: 'Install the CLI'
---
Install the Nhost CLI using the following command:
```bash
sudo curl -L https://raw.githubusercontent.com/nhost/cli/main/get.sh | bash
```
Initialize a new Nhost App locally:
```bash
nhost init -n "nhost-example-app" && cd nhost-example-app
```
And initialize the GitHub repository in the same folder:
```bash
echo "# nhost-example-app" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/[github-username]/nhost-example-app.git
git push -u origin main
```
Now go back to the **Nhost Console** and click **Deployments**. You just made a new deployment to your Nhost app!
![Deployments tab](/img/cli-workflow/deployments-tab.png)
If you click on the deployment you can see that nothing was really deployed. Thats because we just made a change to the README file.
![Deployments details](/img/cli-workflow/deployments-details.png)
Let's do some local backend changes!

View File

@@ -1,81 +0,0 @@
---
title: 'Local changes'
---
Start Nhost locally:
```bash
nhost dev
```
:::tip
Make sure you have [Docker](https://www.docker.com/get-started) installed on your computer. Its required for Nhost to work.
:::
The `nhost dev` command will automatically start a complete Nhost environment locally on your computer using:
- Postgres
- Hasura
- Authentication
- Storage
- Serverless Functions
- Mailhog
You use this local environment to do changes and testing before you deploy your changes to production.
Running `nhost dev` also starts the Hasura Console.
:::tip
It's important that you use the Hasura Console that is started automatically when you do changes. This way, changes are automatically tracked for you.
:::
![Hasura Console](/img/cli-workflow/hasura-console.png)
In the Hasura Console, create a new table `customers` with two columns:
- id
- name
<video
src="/videos/cli-workflow/hasura-create-customers-table.mp4"
width="100%"
controls
/>
When we created the `customers` table there was also a migration created automatically. The migration was created at under `nhost/migrations/default`.
```bash
$ ls -la nhost/migrations/default
total 0
drwxr-xr-x 3 eli staff 96 Feb 7 16:19 .
drwxr-xr-x 3 eli staff 96 Feb 7 16:19 ..
drwxr-xr-x 4 eli staff 128 Feb 7 16:19 1644247179684_create_table_public_customers
```
This database migration has only been applied locally, meaning, you created the `customers` table locally but it does not (yet) exists in production.
To apply the local change to production we need to commit the changes and push it to GitHub. Nhost will then automatically pick up the change in the repository and apply the changes.
:::tip
You can commit and push files in another terminal while still having `nhost dev` running.
:::
```bash
git add -A
git commit -m "Initialized Nhost and added a customers table"
git push
```
Head over to the **Deployments** tab in the **Nhost console** to see the deployment.
![Deployments tab after changes](/img/cli-workflow/deployments-tab-with-changes.png)
Once the deployment finishes the `customers` table is created in production.
![Customers table in Hasura Console](/img/cli-workflow/hasura-customers-table.png)
We've now completed the recommended workflow with Nhost:
1. Develop locally using the Nhost CLI.
2. Push changes to GitHub.
3. Nhost deploys changes to production.

View File

@@ -1,170 +0,0 @@
---
title: 'Metadata and Serverless Functions'
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
In the previous section, we only created a new table; `customers`. Using the CLI you can also do changes to other parts of your backend.
There are three things the CLI and the GitHub integration track and applies to production:
1. Database migrations
2. Hasura Metadata
3. Serverless Functions
For this section, let's do one change to the Hasura metadata and create one serverless function
### Hasura Metadata
We'll add permissions to the `users` table, making sure users can only see their own data. For this, go to the `auth` schema and click on the `users` table. then click on **Permissions** and enter a new role **user** and create a new **select** permission for that role**.**
Create the permission **with custom check**:
```json
{
"id": {
"_eq": "X-Hasura-User-Id"
}
}
```
Select the following columns:
- id
- created_at
- display_name
- avatar_url
- email
Then click **Save permissions**.
<video
src="/videos/cli-workflow/hasura-user-permissions.mp4"
width="100%"
controls
/>
Now, let's do a `git status` again to confirm the permission changes we did was tracked locally in your git repository.
![Git status](/img/cli-workflow/git-status.png)
We can now commit this change:
```bash
git add -A
git commit -m "added permission for uses"
```
Now let's create a serverless function before we push all changes to GitHub so Nhost can deploy our changes.
### Serverless Function
A serverless function is a pieces of code written in JavaScript or TypeScript that take an HTTP request and returns a response.
Here's an example:
```bash
import { Request, Response } from 'express'
export default (req: Request, res: Response) => {
res.status(200).send(`Hello ${req.query.name}!`)
}
```
Serverless functions are placed in the `functions/` folder of your repository. Every file will become its own endpoint.
Before we create our serverless function we'll install `express`, which is a requirement for serverless functions to work.
<Tabs>
<TabItem value="npm" label="npm" default>
```bash
npm install express
npm install -d @types/node @types/express
```
</TabItem>
<TabItem value="yarn" label="Yarn">
```bash
yarn add express
yarn add -D @types/node @types/express
```
</TabItem>
</Tabs>
Then we'll create a file `functions/time.ts`
In the file `time.ts` we'll add the following code to create our serverless function:
```bash
import { Request, Response } from 'express';
export default (req: Request, res: Response) => {
return res
.status(200)
.send(`Hello ${req.query.name}! It's now: ${new Date().toUTCString()}`);
};
```
We can now test the function locally. Locally, the backend URL is `http://localhost:1337`. Functions are under `/v1/functions`. And every function's path and filename becomes an API endpoint.
This means our function `functions/time.ts` is at `http://localhost:1337/v1/functions/time`.
Let's use curl to test our new function:
```bash
curl http://localhost:1337/v1/functions/time
Hello undefined! It's now: Sun, 06 Feb 2022 17:44:45 GMT
```
And with a query parameter with our name:
```bash
curl http://localhost:1337/v1/functions/time\?name\=Johan
Hello Johan! It's now: Sun, 06 Feb 2022 17:44:48 GMT
```
Again, let's use `git status` to see the changes we did to create our serverless function.
Now let's commit the changes and push them to GitHub.
```bash
git add -A
git commit -m "added serverless function"
git push
```
In the Nhost Console, click on the new deployment to see details.
![Deployments details for function](/img/cli-workflow/details-for-function.png)
After Nhost has finished deploying your changes we can test them in production. First let's confirm that the user permissions are applied.
![Hasura Console permissions table](/img/cli-workflow/hasura-permissions-table.png)
Then, let's confirm that the serverless function was deployed. Again, we'll use curl:
```bash
curl https://your-backend-url.nhost.run/v1/functions/time\?name\=Johan
```
![Serverless Function test](/img/cli-workflow/function-test.png)
## Conclusion
In this tutorial we have installed the Nhost CLI and created a local Nhost environment to do local development and testing.
In the local environment we've made changes to our database, to Hasura's metadata and created a serverless function.
We've connected a GitHub repository and pushed our changes to GitHub.
We've seen Nhost automatically deploying our changes and we've verified that the changes were applied.
In summary, we've set up a productive environment using the recommended Nhost workflow:
1. Develop locally using the Nhost CLI.
2. Push changes to GitHub.
3. Nhost deploys changes to production.

View File

@@ -1,31 +0,0 @@
---
title: 'Workflow setup'
---
What follows is a detailed tutorial on how you setup Nhost for this workflow
### Create Nhost App
Create a **new Nhost app** for this tutorial.
:::tip
It's important that you create a **new** Nhost app for this guide instead of reusing an old Nhost app because we want to start with a clean Nhost app.
:::
![Create new app](/img/cli-workflow/create-app.png)
### Create new GitHub Repository
Create a new GitHub repository for your new Nhost app. The repo can be either private or public.
![Create new repo](/img/cli-workflow/create-repo.png)
## Connect GitHub Repository to Nhost App
In the Nhost Console, go to the dashboard of your Nhost app and click **Connect to GitHub**.
<video
src="/videos/cli-workflow/connect-github-repo.mp4"
width="100%"
controls
/>

View File

@@ -1,36 +0,0 @@
---
title: 'Welcome to Nhost'
sidebar_position: 1
---
Nhost is an open-source, real-time, server-less backend platform for building reliable apps that scale with your business.
---
## Components
Nhost uses an opinionated set of open-source components.
#### Database
Your application gets its own PostgreSQL database, the world's most advanced relational database.
#### GraphQL API
Highly performant and real-time GraphQL API with Hasura.
#### Authentication and storage
User management & file storage seamlessly integrated with Hasura permissions.
#### Serverless functions
JavaScript and TypeScript functions run your custom code in the backend.
---
## Get started
Follow our [Quick start](/get-started/quick-start) guide to build your first app.
Check out [Nhost on GitHub](https://github.com/nhost/nhost). Give us a star, and feel free to open a discussion for any feature requests as well.

View File

@@ -1,36 +0,0 @@
---
title: 'Create your app'
sidebar_position: 1
---
Let's create a simple todo-app using Nhost. In a todo-app, a user should be able to create list items for their account (CRUD) and not have anyone else see them (permissions).
To implement this todo-app with Nhost, we'll briefly cover these topics:
- Creating a new app on Nhost
- Defining a database schema
- Inserting data
- Setting permissions
- Querying data via the GraphQL API
By the end of this quick-start, you will better understand what Nhost is and what it does for you.
---
## Log in to Nhost
Go to [app.nhost.io](https://app.nhost.io) and sign up for a new account if you don't have one already.
---
## Create app
Press the **"New App"** button on the console's home page. Choose a name and pick the region closest to your users.
You'll be all set with the Default Workspace and the Free plan for now.
![New App](/img/quick-start/new-app.png)
Creating a new app takes around 20 seconds or so. During this time, Nhost sets up your app's entire backend and infrastructure.
Once the setup completes, you'll automatically see the app dashboard, and you're ready to define your app's database schema.

View File

@@ -1,110 +0,0 @@
---
title: 'JavaScript client'
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
In the previous section, you used the Hasura Console to fetch a list of todos. Now, you will write a small JavaScript client to interact and retrieve todos from your Nhost app.
### Frontend frameworks
Nhost is framework-agnostic and works with any frontend you might build. You can also connect to Nhost from your server-side if you wish.
In this guide, we'll keep the example simple. We're not using a frontend framework. In a real-life scenario, you'd probably build a frontend client with a framework such as React, Vue, Svelte or React Native.
---
## Setup
:::info
Make sure you have [Node.js](https://nodejs.org) and [npm](https://docs.npmjs.com/getting-started) or [Yarn](https://classic.yarnpkg.com/lang/en/docs/install) installed.
:::
Create a new folder called `nhost-todos`, initialize a new JavaScript app there, and install the Nhost JavaScript SDK:
<Tabs>
<TabItem value="npm" label="npm" default>
```bash
npm init -y
npm install @nhost/nhost-js graphql
```
</TabItem>
<TabItem value="yarn" label="Yarn">
```bash
yarn init -y
yarn add @nhost/nhost-js graphql
```
</TabItem>
</Tabs>
:::caution attention
You might have to edit the `package.json` file and add/change the `type` object to `module` (`"type": "module"`).
:::
---
## Initialize Nhost
In the new directory, create a file called `index.js`.
Enter the following code into this file. It will initialize a new `NhostClient` that will interact with your backend:
```js
import { NhostClient } from '@nhost/nhost-js';
const nhost = new NhostClient({
backendUrl: 'https://[app-subdomain].nhost.run', // replace this with the backend URL of your app
});
console.log(nhost.graphql.getUrl());
```
Run the code in your terminal. You should see your app's GraphQL endpoint URL:
```bash
➜ node index.js
https://[app-subdomain].nhost.run/v1/graphql
```
### Query todos
If you now add the following GraphQL query to the client, let's see what happens when you run the updated version:
```js
import { NhostClient } from '@nhost/nhost-js';
const nhost = new NhostClient({
backendUrl: 'https://[app-subdomain].nhost.run',
})(async () => {
// nhost.graphql.request returns a promise, so we use await here
const todos = await nhost.graphql.request(`
query {
todos {
id
created_at
name
is_completed
}
}
`);
// Print todos to console
console.log(JSON.stringify(todos.data, null, 2));
})();
```
```bash
➜ node index.js
null
```
`null` is printed. Why is that? Let's find out.

View File

@@ -1,53 +0,0 @@
---
title: 'Set permissions'
---
While using the Hasura Console, you could fetch the todos because the **admin** role is enabled by default but when building your applications with a client, you want to define permissions using **roles** that your users can assume when making requests.
Hasura supports role-based access control. You create rules for each role, table, and operation (select, insert, update and delete) that can check dynamic session variables, like user ID.
## Unauthenticated users
Use the `public` role in permissions when you want some data to be accessed by anyone without being signed in. The `public` role is the default role in all unauthenticated requests.
Generally speaking, the `public` role should not have insert, update or delete permissions defined.
### Setting `public` permissions
In Hasura Console, go to the **Data** tab, click on the **todos** table, then click **Permissions**. Add a new role called `public` and click on **select**. The permission options for the select operation show up below.
Add the following permissions:
![Public role](/img/quick-start/permissions-public-select.png)
Rerun the program. Now you see all todos.
```bash
➜ node index.js
{
"todos": [
{
"id": "558b9754-bb18-4abd-83d9-e9056934e812",
"created_at": "2021-12-01T17:05:09.311362+00:00",
"name": "write docs",
"is_completed": false
},
{
"id": "480369c8-6f57-4061-bfdf-9ead647e10d3",
"created_at": "2021-12-01T17:05:20.5693+00:00",
"name": "cook dinner",
"is_completed": true
}
]
}
```
---
There are two reasons why the request succeeded:
1. Nhost sets the `public` role for every unauthenticated GraphQL request.
2. You explicitly defined permissions for the `public` role.
It is essential to understand that Hasura has an **allow nothing by default** policy to ensure that only roles and permissions you define explicitly have access to the GraphQL API.

View File

@@ -1,95 +0,0 @@
---
title: 'Define schema'
---
To implement an app for managing a todo list, let's ensure we have database tables for storing todos and users.
---
## Open Hasura Console
Hasura generates real-time GraphQL APIs, but it also provides a web console for manipulating the schema and data of your database.
Go to the **Data** tab on your app's dashboard and select **Open Hasura**. Remember to copy the admin secret.
The Hasura Console of your app's dedicated Hasura instance will open in a new tab. You can use Hasura Console to manage your app's schema, data, permissions, and event triggers.
![Data -> Open Hasura](/img/quick-start/data-tab.png)
---
## Users table
You should see all your database tables on the left-hand side of the screen. You should see multiple different **schemas** displayed as folders:
- `public` schema for your app's custom tables
- `auth` and `storage` schemas for Nhost's user management and file storage
If you open the `auth` schema, you'll see that your app already has a `users` table, so you don't have to create one.
![To store the users, we already have a users table from the auth schema](/img/quick-start/list-of-schemas.png)
---
## Create todos table
In Hasura Console, go to the **data** tab, then click **Create Table**. Name this table `todos`.
### Add frequently used columns
`id` and `created_at` columns are standard and can be added with two clicks. Click **Frequently used columns** and create them:
- `id` (UUID)
- `created_at` (timestamp)
Using frequently used columns ensures the columns get the right name, type, and default value.
![Frequently used columns in the Hasura console](/img/quick-start/frequently-used-columns.png)
### Add custom columns
Add two more columns manually:
- `name` (text)
- `is_completed` (boolean)
Make sure to set the default value of `is_completed` to `false`.
![Create a table in the Hasura console](/img/quick-start/create-table.png)
This is all we need! A new table will be created when you click **Add Table**.
---
## Insert data
Go to the **Insert Row** tab to add some data to your database.
<video width="99%" loop="" muted="" playsInline="" controls="true">
<source src="/videos/insert-todos.mp4" type="video/mp4" />
</video>
---
## Query data
Now that we have data in our database, we can retrieve it via a GraphQL API. Go to the **API** tab in the main menu. You can use this view to make GraphQL requests that query or mutate data in your database.
Paste the following GraphQL query into the form and press the "play" button:
```graphql
query {
todos {
id
created_at
name
is_completed
}
}
```
You should see the todos you just inserted show up as output on the right-hand side.
### Admin role
All requests in the Hasura Console use the `admin` role by default. This role has access to all tables and permissions.

View File

@@ -1,104 +0,0 @@
---
title: 'Upgrade from v1 to v2'
---
Upgrading from Nhost v1 to v2 requires database schema and Hasura metadata changes.
---
## Upgrade Steps
### Create a new Nhost v2 app locally
:::tip
Make sure you have the [Nhost CLI](/reference/cli) installed
:::
```bash
nhost init my-nhost-v2-app
cd my-nhost-v2-app
```
### Update config
Update `version: 3` to `version: 2` in `nhost/config.yaml`. This will update Hasura's configuration version, and we need to downgrade the version when we export migrations and metadata.
### Export current migrations and metadata from Nhost v1
Inside the `nhost/` folder of your app, run:
```bash
hasura migrate create init --from-server --endpoint=[v1-endpoint] --admin-secret=[v1-admin-secret]
hasura metadata export --endpoint=[v1-endpoint] --admin-secret=[v1-admin-secret]
```
### Update Migrations
Make the following changes manually to your migrations.
:::tip
The migration file is located at `nhost/migrations/[timestamp]/up.sql`.
:::
- Add `OR REPLACE` after `CREATE` for the `public.set_current_timestamp_updated_at` function
- Delete all `auth.*` tables and functions (if any).
- Delete `public.users` table and everything related to the table such as constraints, triggers, etc.
- Update FK references from `public.users` to `auth.users` (if any).
### Update Metadata
Make the following changes manually to your metadata.
:::tip
The metadata is located at `nhost/metadata/tables.yaml`.
:::
- Delete tracking all tables in the `auth` schema.
- Delete tracking the `public.users` table.
- Update all references to `users` from the `public` to `auth` schema.
### Start nhost
Start Nhost locally using the [CLI](/reference/cli). From the root of your app, run:
```bash
nhost -d
```
:::tip
Running Nhost applies your local database migrations and Hasura metadata.
:::
### Restart Auth and Storage containers
Open Docker UI and restart Hasura Auth and Hasura Storage. Restarting those containers applies new metadata, effectively tracking everything in the `auth` and the `storage` schema.
### Delete migrations and metadata
Delete the local migrations and metadata.
```bash
rm -rf nhost/migrations nhost/metadata
```
### Update config (again)
Update `config: 2` to `config: 3` in `nhost/config.yaml`.
### Pull migrations and metadata from our local instance
In the `nhost/` folder, run the following command:
```bash
hasura migrate create init --from-server --endpoint=http://localhost:[hasura-port] --admin-secret=nhost-admin-secret
hasura metadata export --endpoint=http://localhost:[hasura-port] --admin-secret=nhost-admin-secret
```
:::warning
You cannot use port `1337` in the commands above. You have to use the specific port Hasura uses. Go to the Hasura Console under API and look for the port Hasura is using under GraphQL Endpoint.
:::
### Done
You now have a Nhost v2 project locally with correct migrations and metadata. Happy hacking!

View File

@@ -1,35 +0,0 @@
---
title: 'Welcome to Nhost'
---
Nhost is an open-source, real-time, server-less backend platform for building reliable apps that scale with your business.
---
## Components
Nhost uses an opinionated set of open-source components.
#### Database
Your application gets its own PostgreSQL database, the world's most advanced relational database.
#### GraphQL API
Highly performant and real-time GraphQL API with Hasura.
#### Authentication and storage
User management & file storage seamlessly integrated with Hasura permissions.
#### Serverless functions
JavaScript and TypeScript functions run your custom code in the backend.
---
## Get started
Follow our [Quick start](/get-started/quick-start) guide to build your first app.
Check out [Nhost on GitHub](https://github.com/nhost/nhost). Give us a star, and feel free to open a discussion for any feature requests as well.

View File

@@ -16,6 +16,7 @@ Get started quickly by following one of our quickstart guides:
- [Next.js](/platform/quickstarts/nextjs)
- [React](/platform/quickstarts/react)
- [RedwoodJS](/platform/quickstarts/redwoodjs)
- [Vue](/platform/quickstarts/vue)
## Products and features

View File

@@ -1,93 +1,108 @@
---
title: 'Email templates'
title: 'Email Templates'
sidebar_position: 4
---
The following emails can be sent as part of the authentication flow:
Nhost Auth sends out transactional emails as part of the authentication service. These emails can be modified using email templates.
- Sign up confirmation email (when using email + password)
- Reset password email (when using email + password)
- Passwordless login email (when using Magic Link)
- Confirm email change (any sign-up method)
The following email templates are available:
---
- **email-verify** - Verify email address
- **email-confirm-change** - Confirm email change to a new email address.
- **signin-passwordless** - Magic Link
- **password-reset** - Reset password
## Enabling custom email templates
Changing email templates is only available for apps on the [Pro and Enterprise plan](https://nhost.io/pricing).
If you have developed custom email templates, you must make them available over HTTP and then point Nhost to them. You can host the templates on your server, or use a public repository on GitHub.
## Update Email Templates
Go to **Users -> Login settings** and scroll down to **Custom email templates**, and set the URL to where your templates are located:
Your app must be connected to a GitHub repository using the [GitHub Integration](/platform/github-integration) to be able to change the email templates.
![Email templates](/img/platform/email-templates.svg)
Email templates are automatically deployed during a deployment, just like database migrations, Hasura metadata, and Serverless Functions.
You only need to define the base URL to point to your hosted templates. The UI will give you a hint about where Nhost will look for your actual template files.
## File Structure
---
Emails are located in the `nhost/` folder like this:
## File structure
The email templates should be provided as body.html and subject.txt files in this predefined folder structure.
The email templates should be provided as body.html and subject.txt files in this predefined folder structure:
**Example:** Email templates for `en` (English) and `es` (Spanish):
```txt
// At base URL (e.g. https://yourapp.com/email-templates/)
en/
email-confirm-change/
body.html
subject.txt
email-verify/
body.html
subject.txt
password-reset/
body.html
subject.txt
signin-passwordless/
body.html
subject.txt
// Other language versions
fr/
/* ... */
se/
/* ... */
my-nhost-app/
└── nhost/
├── config.yaml
├── emails/
│ ├── en/
│ │ ├── email-verify/
│ │ │ ├── subject.txt
│ │ │ └── body.html
│ │ ├── email-confirm-change/
│ │ │ ├── subject.txt
│ │ │ └── body.html
│ │ ├── signin-passwordless/
│ │ │ ├── subject.txt
│ │ │ └── body.html
│ │ └── password-reset/
│ │ ├── subject.txt
│ │ └── body.html
│ └── es/
│ ├── email-verify/
│ │ ├── subject.txt
│ │ └── body.html
│ ├── email-confirm-change/
│ │ ├── subject.txt
│ │ └── body.html
│ ├── signin-passwordless/
│ │ ├── subject.txt
│ │ └── body.html
│ └── password-reset/
│ ├── subject.txt
│ └── body.html
├── migrations/
├── metadata/
└── seeds
```
You dont have to provide all templates - only the one you wish to use and customize. For the templates you do provide, you must provide both body.html and subject.txt.
As you see, the format is:
[View example on GitHub](https://github.com/nhost/nhost/tree/main/examples/custom-email-templates)
---
## Localisation
If Nhost finds a template that matches the recipent users locale, the email will be sent in that language. Use two-letter language codes to set the locale.
English will always be used as the default if another language version is not found.
---
## Template variables
Use variables like `${displayName}` to make your templates more dynamic:
```html
<!-- https://yourapp.com/email-templates/en/email-verify/body.html -->
<h2>Confirm Email Change</h2>
<p>Hi, ${displayName}! Please click this link to verify your email:</p>
<p>
<a href="${displayName}">Verify new email</a>
</p>
```
nhost/emails/{two-letter-language-code}/{email-template}/[subject.txt, body.html]
```
These variables can be used either in the template subject or body. The following variables are supported:
Default templates for English (`en`) and French (`fr`) are automatically generated when the app is initialized with the [CLI](/platform/cli).
## Languages
The user's language is what decides what template to send. The user's language is stored in the `auth.users` table in the `locale` column. This `locale` column contains a two-letter language code in [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) format.
This value is `en` by default for new users.
## Variables
The following variables are available to use in the email templates:
| Variable | Description |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| link | The full URL to the target of the transaction. This should be used in the main call to action. This is available in all templates. |
| serverUrl | URL of the authentication server |
| clientUrl | URL to your frontend app |
| redirectTo | URL where the user will be redirected to after clicking the link and finishing the action of the email |
| ticket | Ticket that is used to authorize the link request |
| displayName | The display name of the user. |
| email | The email of the user. |
| locale | Locale of the user as a two-letter language code. E.g. "en". |
---
Use variables like this: `${displayName}` in the email templates.
<!-- ## Developing emails templates locally -->
**Example:** A email template to verify users' emails:
```html title="nhost/emails/en/email-verify/body.html"
<h2>Verify You Email</h2>
<p>Hi, ${displayName}! Please click the link to verify your email:</p>
<p>
<a href="${link}">Verify Email</a>
</p>
```

View File

@@ -1,75 +1,27 @@
---
title: Authentication
title: Nhost Authentication
sidebar_label: Authentication
sidebar_position: 1
---
# Authentication
Nhost Authentication is a ready-to-use authentication service that is integrated with the [GraphQL API](/platform/graphql) and its permission system from Hasura.
Nhost provides a ready-to-use authentication service, integrated with Nhost JavaScript SDK. This makes it easy to build login flows with multiple sign-in methods.
Nhost Authentication lets you authenticate users to your app using different sign-in methods:
## Getting Started
Sign up a user with the [Nhost JavaScript SDK](/reference/javascript):
```js
import { NhostClient } from '@nhost/nhost-js';
const nhost = new NhostClient({
backendUrl: 'https://[app-subdomain].nhost.run',
});
await nhost.auth.signUp({
email: 'joe@nhost.io',
password: 'secret-password',
});
```
- [Email and Password](/platform/authentication/sign-in-with-email-and-password)
- [Magic Link](/platform/authentication/sign-in-with-magic-link)
- [Phone Number (SMS)](/platform/authentication/sign-in-with-phone-number-sms)
- [Google](/platform/authentication/sign-in-with-google)
- [Facebook](/platform/authentication/sign-in-with-facebook)
- [GitHub](/platform/authentication/sign-in-with-github)
- [LinkedIn](/platform/authentication/sign-in-with-linkedin)
- [Spotify](/platform/authentication/sign-in-with-spotify)
## How it works
1. A user signs up and the user information is added to the `auth.users` table.
2. Nhost returns an [access token](#access-tokens) (JWT token) and the user's information.
3. The user sends a request to the GraphQL API together with the access token.
4. The GraphQL API reviews the access token to ensure the user is authorized to send the request.
1. When a user signs up or is created, the user's information is inserted into the `auth.users` table in your database.
2. Nhost returns an access token and a refresh token, together with the user's information.
3. The user sends requests to Nhost services (GraphQL API, Authentication, Storage, Functions) with the access token as a header.
4. The Nhost services use the user's access token to authorize the requests.
Nhost's authentication service is integrated with your database. All users are stored in the app's database under the `auth` schema and can be accessed using GraphQL:
```graphql
query {
users {
id
displayName
avatarUrl
email
}
}
```
## Tokens
Nhost authentication uses two tokens: Access tokens and refresh tokens.
[Nhost JavaScript SDK](/reference/javascript) automatically handles access and refresh tokens.
### Access tokens
An access token is used to authenticate and authorize a user when doing a GraphQL request.
Access tokens are cryptographically signed and cannot be revoked. They are only valid for 15 minutes. Users can request a new valid access token with a refresh token.
An access token includes a user's ID and roles. Here's an example:
```json
{
"https://hasura.io/jwt/claims": {
"x-hasura-user-id": "c8ee8353-b886-4530-9089-631ea7fd4c8a",
"x-hasura-default-role": "user",
"x-hasura-allowed-roles": ["user", "me"]
},
"iat": 1595146465,
"exp": 1595147365
}
```
### Refresh tokens
A refresh token is used to request a new access token. Refresh tokens are long-lived tokens stored in the database.
Nhost's authentication service is integrated with your database. All users are stored in the `users` table under the `auth` schema.

View File

@@ -1,4 +0,0 @@
{
"label": "OAuth providers",
"position": 3
}

View File

@@ -1,86 +0,0 @@
---
title: 'Sign-in methods'
sidebar_position: 2
---
Nhost supports a variety of sign-in methods:
---
## Email + password
To sign in a user with email and password, the user must first sign up:
```js
await nhost.auth.signUp({
email: 'joe@nhost.io',
password: 'secret-password',
});
```
If you've turned on email verification in your app's **login settings**, a user will be sent a verification email upon signup. The user must click the verification link in the email before they can log in.
Once a user has been signed up (and optionally verified), you can sign them in:
```js
await nhost.auth.signIn({
email: 'joe@nhost.io',
password: 'secret-password',
});
```
---
## Passwordless email (magic link)
Users can sign in with passwordless email, also called magic link.
When a user signs in with passwordless email, Nhost will create the user if they don't already exist and send an email to the user.
When a user clicks the link in the email, they will be redirected to your app and automatically signed in.
Example in JavaScript:
```js
await nhost.auth.signIn({
email: 'joe@nhost.io',
});
```
---
## Passwordless SMS
Users can sign in with passwordless SMS. The passwordless SMS sign in method has a flow:
First, "sign in" the user with a phone number.
```js
await nnhost.auth.signIn({
phoneNumber: '+467610337135',
});
```
This will create the user if the user does not already exist, and send a One Time Password (OTP) to the user's
phone number.
Use the OTP to finalize the sign-in:
```js
await nhost.auth.signIn({
phoneNumber: '+467610337135',
otp: 'otp-from-sms',
});
```
---
## Anonymous
A user can be created anonymously. This is useful for offering a limited version of your application to your users without having them sign in first.
An anonymous user gets a user ID with the `anonymous` role. This role can be used to [set permissions in Hasura](/platform/graphql/permissions).
### Deanonymize users
Anonymous users can be converted to "normal" users by deanonymize the user.

View File

@@ -0,0 +1,43 @@
---
title: Sign In with Email and Password
sidebar_label: Email and Password
slug: /platform/authentication/sign-in-with-email-and-password
---
Follow this guide to sign in users with email and password.
The email and password sign-in method is enabled by default for all Nhost apps.
## Sign Up
Users must first sign up to be able to sign in with Email and Password.
**Example:** Sign up users using the [Nhost JavaScript client](/reference/javascript).
```js
await nhost.auth.signUp({
email: 'joe@example.com',
password: 'secret-password'
})
```
If you've turned on email verification in your app's **login settings**, a user will be sent a verification email upon signup. The user must click the verification link in the email before they can sign in.
## Sign In
Once a user has been signed up (and optionally verified), you can sign them in.
**Example:** Sign in users using the [Nhost JavaScript client](/reference/javascript).
```js
await nhost.auth.signIn({
email: 'joe@example.com',
password: 'secret-password'
})
```
## Verified Emails
You can decide if only verified emails should be able to sign in or not. Modify the **Only allow login for verified emails.** setting in the **Login Settings** section under **Users** in your Nhost app.
An email-verification email is automatically sent to the user during sign-up if your app only allows to sign in users with verified emails. You can also manually send the verification email to the user using [`nhost.auth.sendVerificationEmail()`](/reference/javascript/auth/send-verification-email).

View File

@@ -0,0 +1,22 @@
---
title: Sign In with Magic Link
sidebar_label: Magic Link
slug: /platform/authentication/sign-in-with-magic-link
---
Follow this guide to sign in users with Magic Link, also called passwordless email.
The Magic Link sign-in method enables you to sign in users to your app using an email address, without requiring a password.
To sign in users with Magic Link is a two-step process:
1. Send a Magic Link to the user's email address.
2. The user clicks the Magic Link in their email to sign in to your app.
Use the [Nhost JavaScript client](/reference/javascript) to sign up users with Magic Link in your app:
```js
nhost.auth.signIn({
email: 'joe@example.com'
})
```

View File

@@ -0,0 +1,27 @@
---
title: Sign In with Phone Number (SMS)
sidebar_label: Phone Number (SMS)
slug: /platform/authentication/sign-in-with-phone-number-sms
---
Follow this guide to sign in users with a phone number (SMS).
## Sign In
To sign in users with a phone number is a two-step process:
1. Send a one-time password (OTP) to the user's phone number.
2. The user uses the OTP to sign in
```js
// Step 1: Send OTP to the user's phone number
await nhost.auth.signIn({
phoneNumber: '0011233213123'
})
// Step 2: Sign in user using their phone number and OTP
await nhost.auth.signIn({
phoneNumber: '0011233213123'
otp: '123456',
})
```

View File

@@ -1,6 +1,6 @@
---
title: Sign in with Google
sidebar_position: 1
title: Sign In with Google
sidebar_label: Google
slug: /platform/authentication/sign-in-with-google
---
@@ -15,17 +15,17 @@ Follow this guide to sign in users with Google with your Nhost App.
/>
</p>
## Sign up for Google
## Sign Up for Google
- Sign up for [Google Cloud](https://cloud.google.com/free) if you dont have one already.
- Sign up for [Google Cloud](https://cloud.google.com/free) if you don't have one already.
## Create a Google Cloud Project
> 💡 You can skip this step if you already have a Google Cloud project you want to use.
- Create a new Google Cloud project if you dont already have a project you want to use.
- Create a new Google Cloud project if you don't already have a project you want to use.
## Configure OAuth consent screen
## Configure OAuth Consent Screen
- Search for **OAuth consent screen** in the top search bar in the Google Cloud Console.
- Click on **OAuth consent screen** in the search results.
@@ -33,16 +33,16 @@ Follow this guide to sign in users with Google with your Nhost App.
## **Edit app registration**
### OAuth consent screen
### OAuth Consent Screen
- Fill in your App information.
- Click **SAVE AND CONTINUE.**
- Click **SAVE AND CONTINUE**.
### Scopes
- Click **SAVE AND CONTINUE**.
### Test user
### Test User
- Click **SAVE AND CONTINUE**.
@@ -50,7 +50,7 @@ Follow this guide to sign in users with Google with your Nhost App.
- Click **BACK TO DASHBOARD**.
## Create credentials
## Create Credentials
- Click on **Credentials** under **APIs & Services** in the left menu.
- Click **+ CREATE CREDENTIALS** and then **OAuth client ID** in the top menu.
@@ -60,17 +60,17 @@ Follow this guide to sign in users with Google with your Nhost App.
## Configure Nhost
- A modal appears with your Google Client ID and Client secret.
- A modal appears with your Google Client ID and Client Secret.
- Copy and paste the **Client ID** and **Client Secret** from Google to your Nhost OAuth settings for Google. Make sure the OAuth provider is enabled in Nhost.
- Click the checkbox “**I have pasted the redirect URI into Google”**.
- Click **Confirm settings**.
## Sign In users in your app
## Sign In Users
Use the Nhost JavaScript client to sign in users in your app:
```js
nhost.auth.signIn({
provider: 'google',
});
provider: 'google'
})
```

View File

@@ -1,6 +1,6 @@
---
title: Sign in with Facebook
sidebar_position: 2
title: Sign In with Facebook
sidebar_label: Facebook
slug: /platform/authentication/sign-in-with-facebook
---
@@ -15,53 +15,53 @@ Follow this guide to sign in users with Facebook with your Nhost App.
/>
</p>
## Create Facebook account
## Create Facebook Account
- Create a new [Facebook account](https://www.facebook.com/) if you don't have one already.
## Create Facebook App
- Go to [Meta for Developers](https://developers.facebook.com/).
- Click **My Apps** in the top right
- Click **My Apps** in the top right.
- Click **Create App** in the top right.
- Select your **app type** (e.g. Consumer).
- Click **Next**.
- Fill in the **Display name.**
- Fill in the **Display name**.
- Click **Create app**.
## Set up Facebook Login
- Click on Add Product in the left menu.
- Click on Setup in the Facebook login card.
- Click on **Add Product** in the left menu.
- Click on **Setup** on the Facebook login card.
- **Don't** complete the quickstart. Instead, follow the next step.
- Click on **Settings** under **Facebook Login** in the left menu.
- Make sure **Embedded Browser OAuth Login** is set to **Yes**.
- Fill in **Valid OAuth Redirect URIs** with your **OAuth Callback URL** from Nhost.
- Click **Save changes**.
## Activate Facebook permissions and features
## Activate Facebook Permissions and Features
To make sure we can fetch all user data (email, profile picture and name). For that we need to enable **email** and **public_profile** permissions.
- Click on App Review and Permission and Features in the left menu
- Search and for **email** in the **Search Permissions and Features** search box**.**
- Click on App Review and Permission and Features in the left menu.
- Search for **email** in the **Search Permissions and Features** search box.
- Click on Request advanced access and complete the steps.
- Search and for **public_profile** in the **Search Permissions and Features** search box**.**
- Search for **public_profile** in the **Search Permissions and Features** search box.
- Click on **Request advanced access** and complete the steps.
## Configure Nhost
- Click **Settings** and then **Basic** in the left menu.
- Copy and paste the **App ID (Client ID)** and **App secret (Client Secret)** from Facebook to your Nhost OAuth settings for Facebook. Make sure the [OAuth provider is enabled in Nhost](/platform/authentication/social-sign-in#enabling-social-sign-in-provider).
- Copy and paste the **App ID (Client ID)** and **App secret (Client Secret)** from Facebook to your Nhost OAuth settings for Facebook. Make sure the OAuth provider is enabled in Nhost.
- Click the checkbox “**I have pasted the redirect URI into Facebook”**.
- Click **Confirm settings**.
## Sign In users in your app
## Sign In Users
Use the [Nhost JavaScript client](/reference/javascript) to sign in users in your app:
```js
nhost.auth.signIn({
provider: 'facebook',
});
provider: 'facebook'
})
```

View File

@@ -1,6 +1,6 @@
---
title: Sign in with GitHub
sidebar_position: 3
title: Sign In with GitHub
sidebar_label: GitHub
slug: /platform/authentication/sign-in-with-github
---
@@ -15,7 +15,7 @@ Follow this guide to sign in users with GitHub with your Nhost App.
/>
</p>
## Create GitHub account
## Create GitHub Account
- Create a new [GitHub account](https://github.com/signup) if you don't have one already.
@@ -23,30 +23,30 @@ Follow this guide to sign in users with GitHub with your Nhost App.
- Create a new OAuth application [(direct link)](https://github.com/settings/applications/new) by:
- Click on your profile photo in the top right.
- Click on Settings
- Click on Settings.
- In the left menu, click Developer settings at the bottom.
- Click on Oauth Apps in the left menu
- Click on New OAuth App button in the top right
- Click on Oauth Apps in the left menu.
- Click on New OAuth App button in the top right.
## GitHub OAuth App information
## GitHub OAuth App Information
- Fill in Application Name
- Fill in Homepage URL
- Fill in **Authorization callback URL** with your OAuth Callbacke URL from Nhost
- Fill in Application Name.
- Fill in Homepage URL.
- Fill in **Authorization callback URL** with your OAuth Callbacke URL from Nhost.
## Configure Nhost
- Click Generate a new client secret to generate a OAuth client secret.
- Copy and paste the **Client ID** and **Client Secret** from GitHub to your Nhost OAuth settings for GitHub. Make sure the [OAuth provider is enabled in Nhost](/platform/authentication/social-sign-in#enabling-social-sign-in-provider).
- Click Generate a new client secret to generate an OAuth client secret.
- Copy and paste the **Client ID** and **Client Secret** from GitHub to your Nhost OAuth settings for GitHub. Make sure the OAuth provider is enabled in Nhost.
- Click the checkbox “**I have pasted the redirect URI into GitHub”**.
- Click **Confirm settings**.
## Sign In users in your app
## Sign In Users
Use the [Nhost JavaScript client](/reference/javascript) to sign in users in your app:
```js
nhost.auth.signIn({
provider: 'github',
});
provider: 'github'
})
```

View File

@@ -1,6 +1,6 @@
---
title: Sign in with LinkedIn
sidebar_position: 4
title: Sign In with LinkedIn
sidebar_label: LinkedIn
slug: /platform/authentication/sign-in-with-linkedin
---
@@ -15,11 +15,11 @@ Follow this guide to sign in users with LinkedIn with your Nhost App.
/>
</p>
## Create LinkedIn account
## Create LinkedIn Account
- Create a [LinkedIn account](https://linkedin.com/) if you don't have one already.
## Create LinkedIn OAuth App
## Create a LinkedIn OAuth App
- Go to the [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps).
- Click on Create App in the top right.
@@ -27,10 +27,10 @@ Follow this guide to sign in users with LinkedIn with your Nhost App.
- Click **“I have read and agree to these terms”**.
- Click **Create app** in the bottom right.
## LinkedIn OAuth App information
## LinkedIn OAuth App Information
- Click on **Auth** in the top menu.
- Click on the **pen icon** under **OAuth 2.0 settings** and right next to **Authorized redirect URLs for your app.**
- Click on the **pen icon** under **OAuth 2.0 settings** and right next to **Authorized redirect URLs for your app**.
- Click **Add redirect URL**.
- Copy and past the **OAuth Callback URL** from Nhost.
- Click **Update**.
@@ -43,17 +43,17 @@ Follow this guide to sign in users with LinkedIn with your Nhost App.
## Enable Auth for your LinkedIn OAuth App
- Click on **Products** in the top menu
- Click on **Products** in the top menu.
- Click Select on the **Sign In with LinkedIn**.
- Check the checkbox **I have read and agree to these terms.**
- Check the checkbox **I have read and agree to these terms**.
- Click **Add product**.
## Sign In users in your app
## Sign In Users
Use the [Nhost JavaScript client](/reference/javascript) to sign in users in your app:
```js
nhost.auth.signIn({
provider: 'linkedin',
});
provider: 'linkedin'
})
```

View File

@@ -1,6 +1,6 @@
---
title: Sign in with Spotify
sidebar_position: 5
title: Sign In with Spotify
sidebar_label: Spotify
slug: /platform/authentication/sign-in-with-spotify
---
@@ -15,7 +15,7 @@ Follow this guide to sign in users with Spotify with your Nhost App.
/>
</p>
## Create Spotify account
## Create Spotify Account
- Create a new [Spotify account](https://www.spotify.com/) if you don't have one already.
@@ -23,13 +23,13 @@ Follow this guide to sign in users with Spotify with your Nhost App.
- Go to the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/).
- Click on CREATE AN APP.
- Fill in a App name and App description
- Check the box to aggre Spotify's [Developer Terms of Service](https://developer.spotify.com/terms) and [Branding Guidelines](https://developer.spotify.com/branding-guidelines).
- Fill in an App name and App description.
- Check the box to agree Spotify's [Developer Terms of Service](https://developer.spotify.com/terms) and [Branding Guidelines](https://developer.spotify.com/branding-guidelines).
## Configure OAuth Callback URL
- Click EDIT SETTINGS
- A modal appears
- Click EDIT SETTINGS.
- A modal appears.
- Fill in **Redirect URIs** with your **OAuth Callback URL** from Nhost.
- Click ADD to add the OAuth callback URL.
- Click SAVE.
@@ -41,12 +41,12 @@ Follow this guide to sign in users with Spotify with your Nhost App.
- Click the checkbox “**I have pasted the redirect URI into Spotify”**.
- Click **Confirm settings**.
## Sign In users in your app
## Sign In Users
Use the [Nhost JavaScript client](/reference/javascript) to sign in users in your app:
```js
nhost.auth.signIn({
provider: 'spotify',
});
provider: 'spotify'
})
```

View File

@@ -0,0 +1,4 @@
{
"label": "Sign-In Methods",
"position": 2
}

View File

@@ -1,25 +1,24 @@
---
title: 'OAuth Providers'
slug: /platform/authentication/social-sign-in
title: 'Sign-In Methods'
slug: /platform/authentication/sign-in-methods
---
Nhost Auth supports the following social sign-in providers:
Nhost Authentication support the following sign-in methods:
- [Email and Password](/platform/authentication/sign-in-with-email-and-password)
- [Magic Link](/platform/authentication/sign-in-with-magic-link)
- [Phone Number (SMS)](/platform/authentication/sign-in-with-phone-number-sms)
- [Google](/platform/authentication/sign-in-with-google)
- [Facebook](/platform/authentication/sign-in-with-facebook)
- [GitHub](/platform/authentication/sign-in-with-github)
- [LinkedIn](/platform/authentication/sign-in-with-linkedin)
- [Spotify](/platform/authentication/sign-in-with-spotify)
---
## Enabling Social Sign-In Provider
To start with social sign-in, select your app in Nhost Console and go to **Users****Login settings**.
You need to set client ID and client secret for each provider that you want to enable.
---
You need to set the Client ID and Client Secret for each provider that you want to enable.
## Implementing sign-in experience
@@ -29,19 +28,17 @@ Here's an example of how to implement sign-in with GitHub:
```js
nhost.auth.signIn({
provider: 'github',
});
provider: 'github'
})
```
Users are redirected to your Nhost app's **client URL** by default. By default your Nhost app's client URL is set to `http://localhost:3000`. You can change the value of your client URL in the Nhost console by going to **Users****Login settings****Client URL**.
---
Users are redirected to your Nhost app's **client URL** by default. By default, your Nhost app's client URL is set to `http://localhost:3000`. You can change the value of your client URL in the Nhost console by going to **Users****Login settings****Client URL**.
## Provider OAuth scopes
Scopes are a mechanism in OAuth to allow or limit an application's access to a user's account.
By default, Nhost sets the scope to get the name, email and avatar for each user. Editing scope is not currently supported.
By default, Nhost sets the scope to get the name, email, and avatar url for each user. Editing scope is not currently supported.
## Provider OAuth Tokens

View File

@@ -0,0 +1,73 @@
---
title: Tokens
sidebar_label: Tokens
sidebar_position: 10
---
Nhost Authentication makes use of two types of tokens:
- **Access token** - used to authenticate a user and access APIs.
- **Refresh token** - used to get a new access token.
Users get both an access token and a refresh token when they sign in.
:::info
If you're using the [Nhost JavaScript client](/reference/javascript), all tokens are automatically set and updated for you. But it can still be good to understand how they work.
:::
## Access Token
An access token (also called [JSON Web Token or JWT](https://en.wikipedia.org/wiki/JSON_Web_Token)) contains information about the user such as the user id. Users send this token to the Nhost services (GraphQL, Auth, Storage, Serverless Functions) to let the services know who's making the request so the services can verify the user's identity and resolve the correct permissions.
The access token is added as an `Authorization` header when making a request, like this:
```http title="Header"
Authorization: Bearer <access_token>
```
Here's an example of an encoded access token:
```
eyJhbGciOiJIUzI1NiJ9.eyJodHRwczovL2hhc3VyYS5pby9qd3QvY2xhaW1zIjp7IngtaGFzdXJhLWFsbG93ZWQtcm9sZXMiOlsibWUiLCJ1c2VyIl0sIngtaGFzdXJhLWRlZmF1bHQtcm9sZSI6InVzZXIiLCJ4LWhhc3VyYS11c2VyLWlkIjoiMTUzODYzZjktZTQwMC00Njg2LTgyMTEtMzI0OGNjYWY2MGJhIiwieC1oYXN1cmEtdXNlci1pcy1hbm9ueW1vdXMiOiJmYWxzZSJ9LCJzdWIiOiIxNTM4NjNmOS1lNDAwLTQ2ODYtODIxMS0zMjQ4Y2NhZjYwYmEiLCJpc3MiOiJoYXN1cmEtYXV0aCIsImlhdCI6MTY1Mzg5MjA5NCwiZXhwIjoxNjUzODkyOTk0fQ.9nVL2Lj8KWBW3WrjJr4tPNH3_29qJKKKSDRNYebhiHI
```
The decoded payload of this access token is a JSON object that looks like this:
```json
{
"https://hasura.io/jwt/claims": {
"x-hasura-allowed-roles": ["me", "user"],
"x-hasura-default-role": "user",
"x-hasura-user-id": "153863f9-e400-4686-8211-3248ccaf60ba",
"x-hasura-user-is-anonymous": "false"
},
"sub": "153863f9-e400-4686-8211-3248ccaf60ba",
"iss": "hasura-auth",
"iat": 1653892094,
"exp": 1653892994
}
```
The token contains information about the user id, default role, allowed roles, if the user is anonymous or not, and other metadata.
The claims under `https://hasura.io/jwt/claims` are the same claims that are used by the GraphQL API to create [permissions](/platform/graphql/permissions). The claims (`x-hasura-*`) are also called permission variables. It's possible to add custom [permission variables](/platform/graphql/permissions#custom-permission-variables).
:::info
You can manually decode an access token using [JWT.io](https://jwt.io/).
:::
The token is cryptographically signed by Nhost Authentication, which means that all other Nhost services can trust the information in the token.
:::info
Use the `NHOST_JWT_SECRET` [system environment variable](/platform/environment-variables#system-environment-variables) to verify access tokens in [Serverless Functions](/platform/serverless-functions). Here's a guide on how to [Get the authenticated user in a Serverless Function](https://github.com/nhost/nhost/discussions/278).
:::
The access token can not be revoked. Instead, the token is only valid for 15 minutes. The user can get a new access token by using the refresh token.
## Refresh Token
A refresh token is used to request a new access token. Refresh tokens are long-lived tokens stored in the database in the `auth.refresh_tokens` table.
Refresh tokens are valid for 30 days.
To revoke a refresh token, simply delete it from the database.

View File

@@ -1,94 +0,0 @@
---
title: 'User management'
sidebar_position: 1
---
Users are saved in the database in the `auth.users` table and are accessible via the GraphQL API.
---
## Querying users
Example of getting all users in GraphQL:
```graphql
query {
users {
id
displayName
email
metadata
}
}
```
Example of getting one user in GraphQL:
```graphql
query {
user(id: "<user-id>") {
id
displayName
email
metadata
}
}
```
---
## Creating users
Users should be created using the sign-up or sign-in flows as described under [sign-in methods](/platform/authentication/sign-in-methods).
**Never** create users directly via GraphQL or database. **Never** modify the `auth.users` table. **Never** modify the GraphQL root queries.
You can update the permissions of the `auth.users` table.
---
## Roles
Each user can have one or multiple roles for API requests. You can see the roles of a user and set a default role in Nhost Console under **Users**.
Every GraphQL request is made with a specific role. This role will be used to resolve permissions when querying the database. In other words, every user can have multiple roles, but only one role will be applied for any given GraphQL request.
### Defaults
For new apps, the following roles are available:
- Available roles: `user` and `me`
- Default role: `user`
### Public role
If the user is not signed in, the `public` role will be used.
### Set request role in GraphQL
When no request role is specified, the user's default role will be used:
```js
await nhost.graphql.request(QUERY, {});
```
Make a GraphQL request with the `me` role:
```js
await nhost.graphql.request(
QUERY,
{},
{
headers: {
'x-hasura-role': 'me',
},
},
);
```
If the request is not part of the user's roles, the request will fail.
---
## Metadata
Custom additional user information stored in the `metadata` column. Can be any JSON object.

View File

@@ -0,0 +1,113 @@
---
title: Users
sidebar_label: Users
sidebar_position: 1
---
Users are stored in the database in the `users` table in the `auth` schema.
## Get User Information using GraphQL
**Example:** Get all users.
```graphql
query {
users {
id
displayName
email
metadata
}
}
```
**Example:** Get a single user.
```graphql
query {
user(id: "<user-id>") {
id
displayName
email
metadata
}
}
```
## Creating Users
Users should be created using the sign-up or sign-in flows as described under [sign-in methods](/platform/authentication/sign-in-methods).
- **Never** create users directly via GraphQL or database.
- **Never** modify the `auth.users` table.
- **Never** modify the GraphQL root queries or fields for any of the tables in the `auth` schema.
You're allowed to:
- Add and remove your GraphQL relationships for the `users` table and other tables in the `auth` schema.
- Create, edit and delete permissions for the `users` table and other tables in the `auth` schema.
## Roles
Each user can have one or multiple roles for API requests. You can see the roles of a user and set a default role in Nhost Console under **Users**.
Every GraphQL request is made with a specific role. This role will be used to resolve permissions when querying the database. In other words, every user can have multiple roles, but only one role will be applied for any given GraphQL request.
### Default Role
The default role is used when no role is specified in the GraphQL request. By default, users' default role is `user`.
### Allowed Roles
By default, users have two allowed roles:
- `user`
- `me`
### Public Role
The `public` role is used to resolve GraphQL permissions for unauthenticated users.
### Set Role for GraphQL Requests
When no request role is specified, the user's default role will be used:
```js
await nhost.graphql.request(QUERY, {})
```
Make a GraphQL request with the `me` role:
```js
await nhost.graphql.request(
QUERY,
{},
{
headers: {
'x-hasura-role': 'me'
}
}
)
```
If the request is not part of the user's allowed roles, the request will fail.
## Metadata
You can store custom information about the user in the `metadata` column of the `users` table. The `metadata` column is of type JSONB so any JSON data can be stored.
This is how you attach custom metadata to a user during sign-up:
```js
await nhost.auth.signUp({
email: 'joe@example.com',
password: 'secret-password',
options: {
metadata: {
birthYear: 1989,
town: 'Stockholm',
likes: ['Postgres', 'GraphQL', 'Hasura', 'Authentication', 'Storage', 'Serverless Functions']
}
}
})
```

View File

@@ -1,67 +0,0 @@
---
title: 'Event triggers'
sidebar_position: 2
---
Event triggers are HTTP webhooks that fire on a database event, such as insert, update, or delete. These events are usually a result of GraphQL mutations, but any other database operation will also fire events.
**Example:** Imagine you want to send an email every time a user makes a new order in an e-commerce application. To achieve that, you would create an event trigger on **insert** for the **orders table**. Every time an order is created, an event trigger will send a webhook with the order information, and the webhook can send out an email to the customer.
---
## Creating event triggers
Event triggers are managed in Hasura. Go to Hasura, then select **Events** in the main menu and press "Create".
![Creating event trigger in Hasura](/img/platform/hasura-create-event-trigger.png)
Nhost's [environment variables](/platform/environment-variables) can be used in event trigger headers. For example, you can attach `NHOST_WEBHOOK_SECRET` to an outgoing webhook here.
---
## Serverless functions
It's a common pattern to write a serverless function to catch a webhook fired by an event. When creating webhooks that are meant for your own serverless functions, use the following URL:
```bash
https://[app-subdomain].nhost.run/v1/functions/my-endpoint
```
The environment variable `NHOST_BACKEND_URL` will have the correct value.
```bash
{{NHOST_BACKEND_URL}}/v1/functions/my-endpoint
```
---
## Security
In your serverless function, you need to make sure the request actually comes from your Hasura instance. To do this, you must do two things:
- Add the header `nhost-webhook-secret` when creating the event in Hasura. Set this to `NHOST_WEBHOOK_SECRET`.
- Check the header in the serverless function. It should match the environment variable `NHOST_WEBHOOK_SECRET`.
```js
export default async function handler(req, res) {
// Check webhook secret to make sure the request is valid
if (
req.headers['nhost-webhook-secret'] !== process.env.NHOST_WEBHOOK_SECRET
) {
return res.status(400).send('Incorrect webhook secret')
}
// Do something
// Example:
// - Send an email
// - Create a subscription in Stripe
// - Generate a PDF
// - Send a message to Slack or Discord
// - Update some data in the database
console.log(JSON.stringify(req.body, null, 2))
return res.send('OK')
}
```

View File

@@ -0,0 +1,88 @@
---
title: 'Event triggers'
sidebar_position: 2
---
Event Triggers enable you to invoke webhooks when a database event happens. Event Triggers are typically used to do post-processing tasks, using custom backend code, based on database events.
Event Triggers are associated with a specific table in the database the following event types are available:
- **INSERT** - A row is inserted into a table
- **UPDATE** - A row is updated in a table
- **DELETE** - A row is deleted from a table
Event Triggers can also be triggered manually in the Hasura Console.
### Example Use Case
Let's say you're building an e-commerce application and you want to send an email to the customer when a new order is placed. Orders are stored in the `orders` table in your database.
To send out an email every time a new order is placed, you create an event trigger that listens for the `INSERT` event on the `orders` table. Now every time an order is placed, the even trigger invokes a webhook with the order information, and the webhook sends out the email.
## Create Event Trigger
Event Triggers are managed in the Hasura Console. Select **Events** in the main menu and click **Create** to add an Event Trigger.
<video width="99%" autoPlay muted loop controls="true">
<source src="/videos/hasura-create-event-trigger.mp4" type="video/mp4" />
</video>
## Event Triggers and Serverless Functions
Event Triggers and [Serverless Functions](/platform/serverless-functions) is a perfect combination to build powerful database-backend logic. Every Serverless Function is exposed as an HTTP endpoint that can be used as a webhook for your Event Triggers.
### Format
When using Serverless Functions as webhooks you should configure the webhook using a combination of environment variables and endpoints like this:
```
{{NHOST_BACKEND_URL}}/v1/functions/orders-insert-send-email
```
![as](/img/database/event-triggers/webhook-url-format.png)
The `NHOST_BACKEND_URL` is a [system environment variable](/platform/environment-variables#system-environment-variables) and available in production and in development environments using the [CLI](/platform/cli).
### Security
To make sure incoming requests to your webhook comes from Hasura, and not some malicious third party, you can use a shared webhook secret between Hasura and your webhook handler (e.g. your Serverless Function).
It is recommended to use the `NHOST_WEBHOOK_SECRET`, which is a [system environment variable](/platform/environment-variables#system-environment-variables) and available in production and in development environments using the [CLI](/platform/cli). The `NHOST_WEBHOOK_SECRET` is available both in Hasura and in every Serverless Function.
To set this up is a two-step process:
- Step 1: Add the header `nhost-webhook-secret` with the value `NHOST_WEBHOOK_SECRET` (From env var) when creating the Event Trigger in the Hasura Console.
![as](/img/database/event-triggers/webhook-secret-header.png)
- Step 2: Check the header `nhost-webhook-secret` for incoming requests and make sure the header is the same as the environment variable `NHOST_WEBHOOK_SECRET`.
Here is an example of how to check the header in a Serverless Function:
```js
export default async function handler(req, res) {
// Check header to make sure the request comes from Hasura
if (req.headers['nhost-webhook-secret'] !== process.env.NHOST_WEBHOOK_SECRET) {
return res.status(400).send('Incorrect webhook secret')
}
// Do something
// Example:
// - Send an email
// - Create a subscription in Stripe
// - Generate a PDF
// - Send a message to Slack or Discord
// - Update some data in the database
console.log(JSON.stringify(req.body, null, 2))
return res.send('OK')
}
```
The `NHOST_WEBHOOK_SECRET` is a [system environment variable](/platform/environment-variables#system-environment-variables) and available in production and in development environments using the [CLI](/platform/cli).
## Next Steps
- Read the full [Event Triggers documentation from Hasura](https://hasura.io/docs/latest/graphql/core/event-triggers/index/).
- Learn about the [GraphQL API](/platform/graphql).

View File

@@ -1,48 +0,0 @@
---
title: 'Database'
sidebar_position: 1
---
Every Nhost app comes with a Postgres database. Postgres is the world's most advanced open-source relational database and the most popular SQL database among developers. The database is hosted with Amazon RDS.
Tables are managed in the Hasura Console.
---
## Creating tables
1. In Hasura Console, go to the **Data** tab, select the **public** schema in the left menu and click **Create Table**
2. Enter a table name
3. Add table columns
4. Add a primary key (usually the ID column)
5. (Optional) Add foreign keys
6. (Optional) Add unique keys
7. Click **Add Table**
When a table is created, the table is created in Postgres and added to your GraphQL API.
#### Schemas
You should use the `public` schema when developing your app. `auth` and `storage` are reserved for system functionality like user and file management. You are allowed to modify permissions for tables in the `auth` and `storage` schemas, however.
---
## Modifying table schema
1. In Hasura Console, go to the **Data** tab and click on the table you want to edit in the left menu
2. Click **Modify**
3. Modify or add table columns
#### Track foreign-key relations
1. Click on Data in the top menu.
2. A list of untracked foreign-key relations is presented.
3. Click Track All (recommended) or click Track for each relationship you want to track.
---
## Deleting tables
1. In Hasura Console, go to the **Data** tab and select the table you want to delete in the left menu
2. Click **Modify**
3. Scroll to the bottom of the page and click **Delete table** to open the confirmation dialog

View File

@@ -0,0 +1,143 @@
---
title: 'Database'
sidebar_position: 1
---
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
Every Nhost app comes with its own [Postgres database](https://postgres.org/). Postgres is the world's most advanced open-source relational database and it's the most [popular SQL database for developers](https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-databases).
:::info
It's currently not possible to connect directly to the Postgres database via a connection string. We're working on making the database available soon. You can follow [this issue on GitHub](https://github.com/nhost/nhost/issues/113).
:::
The database is managed via the Hasura Console where you can manage the database via an intuative UI. You can also use SQL to directly interact with the database via the Hasura Console.
## Hasura Console
Hasura Console is where you manage your database. This is where you create and manage tables, schemas, and data.
Open the Hasura Console by clicking on **Data** in the top menu in the Nhost Dashboard, copy the **admin secret**, and click **Open Hasura**. Use the **admin secret** to sign in.
<video width="99%" autoPlay muted loop controls="true">
<source src="/videos/open-hasura-console.mp4" type="video/mp4" />
</video>
## Schemas
The two schemas `auth` and `storage` are reserved for Nhost Auth and Nhost Storage to work. You're allowed to modify **permissions** and **add relationships**. However, never modify any tables or remove relationships that were added by Nhost inside the `auth` and `storage` schemas.
Generally, you should use the `public` schema when creating and managing your tables for your app. It's also ok to add custom schemas for more advanced usage.
## Create Table
1. In Hasura Console, go to the **Data** tab, select the **public** schema in the left menu and click **Create Table**.
2. Enter a table name.
3. Add table columns.
4. Add a primary key (usually the ID column).
5. (Optional) Add foreign keys.
6. (Optional) Add unique keys.
7. Click **Add Table**.
When a table is created the table is instantly available through the [GraphQL API](/platform/graphql).
Here's an example of how to create a `customers` table:
<Tabs groupId="hasura-console-vs-sql">
<TabItem value="hasura-cosnole" label="Hasura Console" default>
<video width="99%" autoPlay muted loop controls="true">
<source src="/videos/hasura-create-table.mp4" type="video/mp4" />
</video>
</TabItem>
<TabItem value="sql" label="SQL">
```sql
CREATE TABLE "public"."customers" (
"id" serial NOT NULL PRIMARY KEY,
"name" text NOT NULL
);
```
</TabItem>
</Tabs>
## Modify Table
1. In Hasura Console, go to the **Data** tab and click on the table you want to edit in the left menu.
2. Click **Modify**.
3. Modify or add table columns.
Here's an example of how to modify a `customers` table by adding an `address` column:
<Tabs groupId="hasura-console-vs-sql">
<TabItem value="hasura-cosnole" label="Hasura Console" default>
<video width="99%" autoPlay muted loop controls="true">
<source src="/videos/hasura-modify-table.mp4" type="video/mp4" />
</video>
</TabItem>
<TabItem value="sql" label="SQL">
```sql
ALTER TABLE "public"."customers" ADD COLUMN "address" text;
```
</TabItem>
</Tabs>
## Delete Table
1. In Hasura Console, go to the **Data** tab and select the table you want to delete in the left menu.
2. Click **Modify**.
3. Scroll to the bottom of the page and click **Delete table** to open the confirmation dialog.
4. Type the **name of the table** and click OK.
Here's an example of how to delete a `customers` table:
<Tabs groupId="hasura-console-vs-sql">
<TabItem value="hasura-cosnole" label="Hasura Console" default>
<video width="99%" autoPlay muted loop controls="true">
<source src="/videos/hasura-delete-table.mp4" type="video/mp4" />
</video>
</TabItem>
<TabItem value="sql" label="SQL">
```sql
DROP TABLE "public"."customers";
```
</TabItem>
</Tabs>
## Migrations
To track database changes, use the [Nhost CLI](/platform/cli) to develop locally and use our [GitHub integration](/platform/github-integration) to automatically deploy database migrations live.
1. Develop locally using the Nhost CLI.
2. Push changes to GitHub.
3. Nhost automatically deploys changes.
Learn how to [get started with Nhost CLI](/platform/overview/get-started-with-nhost-cli).
## Backups
Databases on [Pro and Enterprise plans](https://nhost.io/pricing) are backed up automatically.
## Best Practices
- Use lower-case names for tables. E.g. `customers` instead of `Customers`.
- Use plural names for tables. E.g. `customers` instead of `customer`.
## Next Steps
- [Learn PostgreSQL Tutorial - Full Course for Beginners (YouTube)](https://www.youtube.com/watch?v=qw--VYLpxG4).
- Learn more about how to manage your [Postgres database in Hasura](https://hasura.io/docs/latest/graphql/core/databases/postgres/schema/index/).
- Learn about the [GraphQL API](/platform/graphql).

View File

@@ -1,15 +1,24 @@
---
title: 'Environment variables'
title: 'Environment Variables'
sidebar_position: 9
---
Environment variables are key-value pairs configured outside your source code. They are used to store environment-specific values such as API keys.
Environment Variables are key-value pairs configured outside your source code. They are used to store environment-specific values such as API keys.
---
You can manage your app's environment variables in Nhost Console under **Variables**. When you define a new variable, you can set one value for **production** and one for **development**.
## System environment variables
![Environment Variables](/img/platform/environment-variables/environment-variables.png)
System environment variables are automatically available in production and local development. The following system environment variables are available:
When an environment variable is changed, you must deploy your app again using the [GitHub integration](/platform/github-integration) for the changes to take effect.
Environment Variables are available in:
- Hasura
- Serverless Functions
## System Environment Variables
System environment variables are automatically available in production and during development. The following system environment variables are available:
- `NHOST_ADMIN_SECRET`
- `NHOST_WEBHOOK_SECRET`
@@ -26,19 +35,9 @@ jwrsszdp2dhkjxsh4df69pzm3ja6ukedx8ja43zdt6q9kgbgg2w9vh2sedeppukud9a2qzy29v3afdn7
NHOST_BACKEND_URL=https://xxxxxxx.nhost.run
```
---
## Development Environment Variables
## Custom environment variables
You can manage your app's environment variables in Nhost Console under **Variables**. When you define a new variable, you can set a different value for production and local development.
When an environment variable is changed, you must deploy your app again for the changes to take effect.
---
## Local environment variables
When developing locally, environment variables set in `.env.development` are available in your local environment. There are two ways to manage them:
When developing locally using the [CLI](/platform/cli), environment variables set in `.env.development` are available in your local environment. There are two ways to manage them:
1. Edit the `.env.development` file manually.
2. Add development environment variables in the Nhost Console and use `nhost env pull` to sync them. This way, your team members will also have access to the same variables.

View File

@@ -1,36 +0,0 @@
---
title: 'GitHub integration'
sidebar_position: 10
---
You can connect your Nhost app to a GitHub repository. When you do this, any updates you push to your code will automatically be deployed.
---
## Production branch
Nhost will only deploy your production branch. By default this will match the default branch set on GitHub (usually `main`). You can change this option on Nhost Console.
Specifically, the following will be deployed:
- Database migrations
- Hasura metadata
- Serverless functions
---
## Workflow
Create a new Nhost app. Then use [Nhost CLI](/platform/cli) to initialize your Nhost app locally.
The workflow is as follows:
1. Make local changes (migrations, metadata, functions)
2. Push changes to GitHub
3. Nhost automatically applies changes to production
**You should always follow this workflow.** Never change things in production directly because that will make the local and production state to be out of sync.
### Local and production branches out of sync
If you do changes directly in your production backend, say you add a new table in production, your migrations in your repository will be out of sync. In such a case, we recommend to start over with `nhost init --remote` to get into a consistent state.

View File

@@ -0,0 +1,56 @@
---
title: 'GitHub Integration'
sidebar_position: 10
---
The GitHub integration allows you to automatically deploy your Nhost app when on push and merge to a GitHub repository that is connected to your Nhost app.
When a GitHub repository is connected to a Nhost app, Nhost automatically deploys changes when you push code to the repo.
The following things are deployed:
- Database migrations
- Hasura metadata
- Serverless Functions
:::info
Settings in `nhost/config.yaml` are **not** deployed. That menas you need to manually sync settings between local and remote environments between the CLI and Nhost Cloud.
:::
## Connecting a GitHub repository
1. From your Nhost app, click **Connect to Github**.
![Connect to GitHub](/img/architecture/cli/connect-repo-step-1.png)
2. **Install the Nhost app** on your Github account.
![Install the Nhost GitHub App](/img/architecture/cli/connect-repo-step-2.png)
3. **Connect** your Github repository.
![Select reopsitoru](/img/architecture/cli/connect-repo-step-3.png)
## Deployment Branch
Nhost only deploys your **deployment branch**. By default, your deployment branch matches the default branch set on GitHub (usually `main`).
You can change the deployment branch by clicking **Edit** next to the repository in your Nhost app's dashboard.
You can have multiple Nhost apps connected to the same GitHub repository and use different deployment branches (e.g., `main` and `staging`).
<center>
<img src="/img/platform/github-integration/deployment-branch.png" alt="drawing" width="50%" />
</center>
## Base Directory
If your Nhost app is not at the root of your git repository, you can set a custom base directory. The base directory is where the `nhost` and `functions` directories are located. In other words, the base directory is the **parent directory** of the `nhost` and `functions` directories.
<center>
<img src="/img/platform/github-integration/base-directory.png" alt="drawing" width="50%" />
</center>
## Next Steps
- Learn how to [use the CLI to deploy your Nhost app](/platform/overview/get-started-with-nhost-cli).

View File

@@ -3,41 +3,52 @@ title: 'GraphQL'
sidebar_position: 1
---
Every Nhost app has its own autogenerated GraphQL API. The GraphQL API is based on the tables and columns in the [Postgres database](/platform/database) and is instantly available. It's [Hasura GraphQL engine](https://github.com/hasura/graphql-engine) that powers the GraphQL API.
A GraphQL API is automatically and instantly available based on the tables and columns in your [database](/platform/database).
The GraphQL API is available at: `https://[subdomain].nhost.run/v1/graphql`.
The GraphQL API has instant support for inserting, selecting, updating, and deleting data, which usually account for 80% of all operations you need in your app.
It's the [Hasura GraphQL engine](https://github.com/hasura/graphql-engine) that powers the GraphQL API which means that all documentation about [queries](https://hasura.io/docs/latest/graphql/core/databases/postgres/queries/index/), [mutations](https://hasura.io/docs/latest/graphql/core/databases/postgres/mutations/index/), and [subscriptions](https://hasura.io/docs/latest/graphql/core/databases/postgres/subscriptions/index/) from Hasura's documentation is applicable.
## What is GraphQL
GraphQL is a query language for APIs that prioritize developer experience. The GraphQL API can be used to both fetch (query) and modify (mutation) data. GraphQL is especially powerful for frontend developers who wants to build products fast.
GraphQL is a query language for APIs that prioritize developer experience. The GraphQL API can be used to both fetch (query) and modify (mutation) data. GraphQL is especially powerful for frontend developers who want to build products fast.
### GraphQL clients for JavaScript
GraphQL has grown rapidly in popularity in the last years and has been adopted by almost all major tech companies such as Facebook, GitHub, and Stripe.
To interact with the GraphQL API it's recommended to use a GraphQL client:
Building your GraphQL API is a lot of work, but with Nhost it's easy because every table and column is instantly available in your GraphQL API.
- [Apollo Client](https://www.apollographql.com/docs/react/)
## Endpoint
The GraphQL API is available at `https://[subdomain].nhost.run/v1/graphql` When using the [CLI](/platform/cli) the GraphQL API is available at `http://localhost:1337/v1/graphql`.
## GraphQL Clients for JavaScript
The Nhost JavaScript client comes with a simple [GraphQL client](/reference/javascript/nhost-js/graphql) that works well for the backend or simple applications.
When building more complex frontend applications, we recommend using a more advanced GraphQL client such as:
- [Apollo Client](https://www.apollographql.com/docs/react/):
- [Nhost Apollo Client for React](/reference/react/apollo)
- [Nhost Apollo Client for Vue](/reference/vue/apollo)
- [URQL](https://formidable.com/open-source/urql/)
- [React Query](https://react-query.tanstack.com/graphql)
- [SWR](https://swr.vercel.app/docs/data-fetching#graphql)
It's also possible to use the built-in [GraphQL client](/reference/javascript/nhost-js/graphql) in the Nhost JavaScript client.
---
## GraphQL Query
## Queries
A GraphQL query is used to fetch data from the database.
Here is a GraphQL query that selects `title`, `body`, and `isCompleted` for every row in a `todos` table.
:::tip
The [Queries documentation from Hasura](https://hasura.io/docs/latest/graphql/core/databases/postgres/queries/index/) is applicable since Nhost uses Hasura's GraphQL Engine for your app.
:::
**Example:**
**Example:** A GraphQL query to select `title`, `body`, and `isCompleted` for every row in the `todos` table.
```graphql
```graphql title=GraphQL
query GetTodos {
todos {
title
body
done
isCompleted
}
}
@@ -45,7 +56,7 @@ query GetTodos {
**Response:**
```json
```json title=Response
{
"data": {
"todos": [
@@ -61,11 +72,11 @@ query GetTodos {
#### Filtering and sorting
GraphQL queries More complex queries utilize filters, limits, sorting and aggregation.
More complex queries utilize filters, limits, sorting, and aggregation.
This GraphQL query selects all items in the todo table that aren't done, with the total number of comments and the last five comments:
Here's an example of a more complex GraphQL query that selects all items in the `todos` table that aren not completed, with the total number of comments and the last five comments:
```graphql
```graphql title=GraphQL
query GetTodosWithLatestComments {
todos(where: { isCompleted: { _eq: false } }) {
title
@@ -84,15 +95,13 @@ query GetTodosWithLatestComments {
}
```
Response:
```json
```json title=Response
{
"data": {
"todos": [
{
"title": "Delete Firebase account",
"body": "Migrate to nhost.io",
"body": "Migrate to Nhost",
"comments": [
{
"comment": "Let's do this",
@@ -116,137 +125,121 @@ Response:
}
```
:::tip
Check out Hasura's documentation for full documentation for GraphQL queries.
## Mutations
[Hasura GraphQL queries](https://hasura.io/docs/latest/graphql/core/databases/postgres/queries/index/)
A GraphQL mutation is used to insert, upsert, update, or delete data.
:::tip
The [Mutations documentation from Hasura](https://hasura.io/docs/latest/graphql/core/databases/postgres/mutations/index/) is applicable since Nhost uses Hasura's GraphQL Engine for your app.
:::
---
### Insert Data
## GraphQL mutations
**Example:** A GraphQL mutation to insert data:
Mutations are used to insert, update or delete data.
### Inserting data
GraphQL mutation to insert data looks like this:
```graphql
```graphql title=GraphQL
mutation InsertTodo {
insert_todos(
objects: [
{
title: "Delete Firebase account"
body: "Migrate to nhost.io"
done: false
}
]
objects: [{ title: "Delete Firebase account", body: "Migrate to Nhost", isCompleted: false }]
) {
returning {
id
title
body
done
isCompleted
}
}
}
```
Response:
```json
```json title=Reponse
{
"data": {
"insert_todos": [
{
"id": "bf4b01ec-8eb6-451b-afac-81f5058ce852",
"title": "Delete Firebase account",
"body": "Migrate to nhost.io",
"done": true
"body": "Migrate to Nhost",
"isCompleted": true
}
]
}
}
```
### Inserting multiple rows
#### Insert Multiple Rows
Multiple rows can be inserted with an array as the objects property. This can be useful for migrating data.
Use an array of objects to insert multiple rows at the same time.
```graphql
**Example:** Insert multiple Todos at the same time:
```graphql title=GraphQL
mutation InsertMultipleTodos {
insert_todos(
objects: [
{
title: "Build the front end"
body: "Mobile app or website first?"
done: false
}
{ title: "Launch 🚀", body: "That was easy", done: false }
{ title: "Build the front end", body: "Mobile app or website first?", isCompleted: false }
{ title: "Launch 🚀", body: "That was easy", isCompleted: false }
]
) {
returning {
id
title
body
done
isCompleted
}
}
}
```
---
## Updating data
### Update Data
You can update existing data with an update mutation. You can update multiple rows at once.
To mark a todo as done, you would use a mutation like this:
**Example:** A GraphQL mutation to mark a atodo item as completed:
```graphql
mutation UpdateTodoStatus($id: uuid, $done: Boolean) {
update_todos(_set: { done: $done }, where: { id: { _eq: $id } }) {
```graphql title=GraphQL
mutation UpdateTodoStatus($id: uuid, $isCompleted: Boolean) {
update_todos(_set: { isCompleted: $isCompleted }, where: { id: { _eq: $id } }) {
returning {
body
done
isCompleted
title
}
}
}
```
Notice how we are using variables as the `id` and `done` variables, which lets us mark any todo as done or not done with the same mutation.
Notice how we are using variables as the `id` and `isDone` variables, which lets us mark any todo as completed or not completed with the same mutation.
### Upsert
### Upsert Data
When you're not sure if a piece of data already exists, use an upsert mutation. It will either insert an object into the database if it doesn't exist, or update the fields of an existing object.
When you're not sure if a piece of data already exists, use an upsert mutation. It will either insert an object into the database if it doesn't exist or update the fields of an existing object.
Unlike for update mutations, you must pass all columns to an upsert mutation.
In order to convert your insert mutation to an upsert, you need to add an `on_conflict` property. This tells Hasura which fields it should use to find duplicates.
To convert your insert mutation to an upsert, you need to add an `on_conflict` property for the GraphQL API to know which fields it should use to find duplicates.
The `on_conflict` key must be a unique key in your database:
```graphql
```graphql title=GraphQL
mutation UpsertTodo {
insert_todos(
objects: { title: "Delete Firebase account", body: "...", done: false }
on_conflict: { constraint: todos_title_key, update_columns: [title, done] }
objects: { title: "Delete Firebase account", body: "...", isCompleted: false }
on_conflict: { constraint: todos_title_key, update_columns: [title, isCompleted] }
) {
returning {
id
title
body
done
isCompleted
}
}
}
```
This will update the body and done properties of the todo titled `"Delete Firebase account"`.
This will update `body` and `done` of the todos with the title "Delete Firebase account".
### Conditional upsert
#### Conditional upsert
Inserts a new object into a table, or if the primary key already exists, updates columns if the `where` condition is met.
@@ -272,7 +265,7 @@ mutation UpsertTodo {
}
```
### Ignore mutation on conflict
#### Ignore mutation on conflict
If `update_columns` is empty, the mutation will be ignored if the object already exists.
@@ -296,13 +289,11 @@ mutation InsertTodo {
In this case, the insert mutation is ignored because a todo with the `title` `"Delete Firebase account"` already exists, and `update_columns` is empty.
---
## Deleting data
### Delete Data
To delete your data, use a delete mutation. This mutation will delete all `todos` where `done` is `true`:
```graphql
```graphql title="GraphQL mutation"
mutation DeleteDoneTodos {
delete_todos(where: { done: { _eq: true } }) {
affected_rows
@@ -316,9 +307,9 @@ If you have set up foreign keys which will restrict a delete violation, you will
## Subscriptions
GraphQL subscriptions are queries that use WebSockets to keep the data up to date in your app in real time:
GraphQL subscriptions are queries that use WebSockets to keep the data up to date in your app in real-time. You only have to change `query` to `subscription` when constructing the GraphQL document:
```graphql
```graphql title="GraphQL subscription"
subscription GetTodos {
todos {
title

View File

@@ -3,33 +3,99 @@ title: 'Permissions'
sidebar_position: 1
---
The GraphQL API is protected by a role-based permission system based on access tokens. Permissions are handled on a per-table basis in Hasura Console.
The GraphQL API is protected by a role-based permission system.
---
For each **role**, you create **rules** for the **select**, **insert**, **update**, and **delete** operations.
## How it works
**Example:** Let's say you have a `posts` table, and you want users to only access their own posts. This is how you would do it:
Upon login a user gets an access token which is then being sent with every GraphQL API request to authenticate the user and apply the correct permissions when reading and writing data.
```sql title="Posts Table"
CREATE TABLE "public"."posts" (
"id" serial NOT NULL PRIMARY KEY,
"title" text NOT NULL,
"user_id" uuid NOT NULL,
);
```
In Hasura you can specify what a user is allowed to do. A common use case is to allow a user to read something if `user_id` in the database is equal to the user ID in the access token.
```json title="Hasura Permission Rule"
{
"user_id": {
"_eq": "X-Hasura-User-Id"
}
}
```
Access token data is included as headers with every API request. By default, every user has the following session variables that can be used when creating permission rules:
The rule above make it so users can only select posts where the value of `user_id` is equal (`_eq`) to their user ID (`x-hasura-user-id`).
- `x-hasura-user-id`
- `x-hasura-allowed-roles`
- `x-hasura-default-role`
## What is `x-hasura-user-id`?
The default role for users is `user`.
`x-hasura-user-id` is a permission variable that is used to create permission rules in Hasura. The permission variable comes from the [access token](platform/authentication#access-tokens) that signed-in users have.
> You can also [add custom permission](#add-permission-variables) varaibles if you need to.
The `x-hasura-user-id` permission variable is always available for all signed-in users. You can add [custom permission variables](#custom-permission-variables) to create more complex permission rules unique to your app.
---
## Custom Permission Variables
## Select permissions
You can add custom permission variables in the Nhost console under **Users** and then **Roles and permissions**. These permission variables are then available when creating permissions for your GraphQL API in the Hasura console.
![Permission Variables](/img/platform/permission-variables-preview.svg)
**Example:**: Let's say you add a new permission variable `x-hasura-organisation-id` with path `user.profile.organisation.id`. This means that Nhost Auth will get the value for `x-hasura-organisation-id` by internally generating the following GraphQL query:
```graphql
query {
user(id: "<User's ID>") {
profile {
organisation {
id
}
}
}
}
```
## Roles
Every GraphQL request is resolved based on a **single role**. Roles are added in the Hasura Console when selecting a table and clicking **Permisisons**.
If the user is not signed in, the GraphQL API resolves permissions using the `public` role.
### Default Role
Every user have one **default role**. The default role is used to resolve permissions if no other role is specified using the `x-hasura-role` header in the GraphQL request. By default, the default role is `user` for signed-in users.
### Allowed Roles
Every user also has a one or more **allowed roles**. Allowed roles are roles that the user is allowed to use to override the default role when making a GraphQL request. To override the default role, add a header `x-hasura-role = <role>` to the GraphQL request.
## Public Access
GraphQL requests from unauthenticated users are resolved using the `public` role.
## Insert permissions
![Insert permissions](/img/graphql/permissions/insert-permissions.png)
Here is a popular approach for insert permission for signed-in users.
1. At the top of the page, click **"insert"** on the **"user"** role.
2. Select **"Without any checks"**.
3. Select the columns you want to allow users to insert.
In our example, we only mark `title`, because the other columns should not be inserted by the user.
We also want every new record's `user_id` value to be set to the ID of the user making the request. We can tell Hasura to do this using **Column presets**.
4. Under **Column presets**, set `user_id` to `x-hasura-user-id`.
Now, users who are signed-in can insert posts. Users can add a title when inserting a post. The post's `id` is automatically generated by the database and the `user_id` is automatically set to the user's id using the `user_id = x-hasura-user-id` column preset.
## Select, Update and Delete Permissions
Select, update, and delete permissions usually follows the same pattern. Here's an example of how to add select permissions:
![Select permissions](/img/platform/permission-select.png)
One of the most common permission requirements is that logged-in users should only be able to read their own data. This is how it can be achieved with Hasura.
One of the most common permission requirements is that signed-in users should only be able to read their own data. This is how to do that:
1. Go to **Hasura Console**
1. Select your table and open the **Permissions** tab
@@ -46,40 +112,14 @@ To further refine this rule, do the following:
Note that if you add columns to your table table later, you must check new columns here to let users read them.
---
## Next Steps
## Insert permissions
Hasura has more in-depth documentation related to permissions that you can learn from:
![Insert permissions](/img/platform/permission-insert.png)
Here is a popular approach for insert permission for logged in users.
1. At the top of the page, click **"insert"** on the **"user"** role.
1. Select **"Without any checks"**.
1. Select the columns you want to allow users to insert.
In our example, we only select `name`, because we want all other other columns to be filled with default values.
We also want every new record's `user_id` value to be set to the ID of the user making the request. We can tell Hasura to do this with **column presets**.
1. Under column presets, set `user_id` to `x-hasura-user-id`.
## Add Permission Variables
You can add extra permission variables in the Nhost console under **Users** and then **Roles and permissions**. These permission variables are then available when creating permissions for your GraphQL API in the Hasura console.
![Permission Variables](/img/platform/permission-variables-preview.svg)
As an example, let's say you add a new permission variable `x-hasura-organisation-id` with path `user.profile.organisation.id`. This means that Nhost Auth will get the value for `x-hasura-organisation-id` by internally generating the following GraphQL query:
```graphql
query {
user(id: "<user-id>") {
profile {
organisation {
id
}
}
}
}
```
- [Authorization / Access control](https://hasura.io/docs/latest/graphql/core/auth/authorization/index/)
- [Access control basics](https://hasura.io/docs/latest/graphql/core/auth/authorization/basics/)
- [Roles & Session variables](https://hasura.io/docs/latest/graphql/core/auth/authorization/roles-variables/)
- [Inherited roles](https://hasura.io/docs/latest/graphql/core/auth/authorization/inherited-roles/)
- [Configuring permission rules](https://hasura.io/docs/latest/graphql/core/auth/authorization/permission-rules/)
- [Access control examples](https://hasura.io/docs/latest/graphql/core/auth/authorization/common-roles-auth-examples/)
- [Multiple column + row permissions for the same role](https://hasura.io/docs/latest/graphql/core/auth/authorization/role-multiple-rules/)

View File

@@ -1,5 +1,5 @@
{
"label": "Overview",
"position": 2,
"collapsed": false
"collapsed": true
}

View File

@@ -514,7 +514,7 @@ composable to execute that query when the user submits the form from the profile
```markup title="src/pages/profile.vue"
<script setup lang="ts">
import { gql } from '@apollo/client'
import { gql } from '@apollo/client/core'
import { useNhostClient, useUserData } from '@nhost/vue'
import { useMutation } from '@vue/apollo-composable'
import { ref } from 'vue'
@@ -600,7 +600,7 @@ Finally, to add real-time caching, synchronizing, and updating server state in y
First add the following GraphQL subscription to retrieve the current user data component:
```ts title="src/pages/profile.vue"
import { gql } from '@apollo/client'
import { gql } from '@apollo/client/core'
const GET_USER_SUBSCRIPTION = gql`
subscription GetUser($id: uuid!) {
@@ -627,7 +627,7 @@ Finally, we can run our GraphQL subscription using the `useSubscription` composa
```markup title="src/pages/profile.vue"
<script setup lang="ts">
import { gql } from '@apollo/client'
import { gql } from '@apollo/client/core'
import { useNhostClient, useUserId } from '@nhost/vue'
import { useMutation, useSubscription } from '@vue/apollo-composable'
import { computed, ref } from 'vue'

View File

@@ -55,7 +55,7 @@ You **MUST** install `express` locally in the base directory of your Nhost app.
```bash
npm install -d express
# or yarn
yarn add -d express
yarn add -D express
```
:::
@@ -80,7 +80,7 @@ Here's an example of four serverless functions with their files and their HTTP e
| `functions/index.js` | `https://[app-subdomain].nhost.run/v1/functions/` |
| `functions/users/index.ts` | `https://[app-subdomain].nhost.run/v1/functions/users` |
| `functions/users/active.ts` | `https://[app-subdomain].nhost.run/v1/functions/users/active` |
| `functions/my-copmany.js` | `https://[app-subdomain].nhost.run/v1/functions/my-company` |
| `functions/my-company.js` | `https://[app-subdomain].nhost.run/v1/functions/my-company` |
---

View File

@@ -11,6 +11,13 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-j
Use `nhost.auth.isAuthenticated` to check if the user is authenticated or not.
Note: `nhost.auth.isAuthenticated()` can return `false` for two reasons:
1. The user is not authenticated
2. The user is not authenticated but _might_ be authenticated soon (loading) because there is a network request in transit.
Use `nhost.auth.getAuthenticationStatus` to get both authentication and loading status.
```ts
const isAuthenticated = nhost.auth.isAuthenticated()

View File

@@ -4,13 +4,16 @@ title: getAuthenticationStatus()
sidebar_label: getAuthenticationStatus()
slug: /reference/javascript/auth/get-authentication-status
description: Use `nhost.auth.getAuthenticationStatus` to get the authentication status of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L493
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L494
---
# `getAuthenticationStatus()`
Use `nhost.auth.getAuthenticationStatus` to get the authentication status of the user.
If `isLoading` is `true`, the client doesn't know whether the user is authenticated yet or not
because some internal authentication network requests have not been resolved yet.
```ts
const { isAuthenticated, isLoading } = nhost.auth.getAuthenticationStatus()

View File

@@ -4,7 +4,7 @@ title: getAccessToken()
sidebar_label: getAccessToken()
slug: /reference/javascript/auth/get-access-token
description: Use `nhost.auth.getAccessToken` to get the access token of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L523
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L524
---
# `getAccessToken()`

View File

@@ -4,7 +4,7 @@ title: getDecodedAccessToken()
sidebar_label: getDecodedAccessToken()
slug: /reference/javascript/auth/get-decoded-access-token
description: Use `nhost.auth.getDecodedAccessToken` to get the decoded access token of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L538
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L539
---
# `getDecodedAccessToken()`

View File

@@ -4,7 +4,7 @@ title: getHasuraClaims()
sidebar_label: getHasuraClaims()
slug: /reference/javascript/auth/get-hasura-claims
description: Use `nhost.auth.getHasuraClaims` to get the Hasura claims of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L555
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L556
---
# `getHasuraClaims()`

View File

@@ -4,7 +4,7 @@ title: getHasuraClaim()
sidebar_label: getHasuraClaim()
slug: /reference/javascript/auth/get-hasura-claim
description: Use `nhost.auth.getHasuraClaim` to get the value of a specific Hasura claim of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L573
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L574
---
# `getHasuraClaim()`

View File

@@ -4,13 +4,15 @@ title: refreshSession()
sidebar_label: refreshSession()
slug: /reference/javascript/auth/refresh-session
description: Use `nhost.auth.refreshSession` to refresh the session with either the current internal refresh token or an external refresh token.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L596
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L597
---
# `refreshSession()`
Use `nhost.auth.refreshSession` to refresh the session with either the current internal refresh token or an external refresh token.
Note: The Nhost client automatically refreshes the session when the user is authenticated but `nhost.auth.refreshSession` can be useful in some special cases.
```ts
// Refresh the session with the the current internal refresh token.
nhost.auth.refreshToken()

View File

@@ -4,7 +4,7 @@ title: getSession()
sidebar_label: getSession()
slug: /reference/javascript/auth/get-session
description: Use `nhost.auth.getSession()` to get the session of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L640
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L641
---
# `getSession()`

View File

@@ -4,7 +4,7 @@ title: getUser()
sidebar_label: getUser()
slug: /reference/javascript/auth/get-user
description: Use `nhost.auth.getUser()` to get the signed-in user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L655
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L656
---
# `getUser()`

View File

@@ -43,6 +43,18 @@ When set to true, will automatically refresh token before it expires
Object where the refresh token will be persisted and read locally.
Recommended values:
- `'web'` and `'cookies'`: no value is required
- `'react-native'`: `import Storage from @react-native-async-storage/async-storage`
- `'cookies'`: `localStorage`
- `'custom'`: an object that defines the following methods:
- `setItem` or `setItemAsync`
- `getItem` or `getItemAsync`
- `removeItem`
- `'capacitor'`: `import { Storage } from @capacitor/storage`
- `'expo-secure-store'`: `import * as SecureStore from 'expo-secure-store'`
---
**<span className="parameter-name">clientStorageType</span>** <span className="optional-status">optional</span> `ClientStorageType`

View File

@@ -15,15 +15,16 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
**<span className="parameter-name">config</span>** <span className="optional-status">required</span> [`NhostClientConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-client-constructor-params)
| Property | Type | Required | Notes |
| :----------------------------------------------------------------------------------------------------- | :------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
| <span className="parameter-name"><span className="light-grey">config.</span>backendUrl</span> | `string` | ✔️ | Nhost backend URL. |
| <span className="parameter-name"><span className="light-grey">config.</span>refreshIntervalTime</span> | `number` | | Time interval until token refreshes, in seconds |
| <span className="parameter-name"><span className="light-grey">config.</span>clientStorageType</span> | `ClientStorageType` | | Define a way to get information about the refresh token and its exipration date. |
| <span className="parameter-name"><span className="light-grey">config.</span>clientStorage</span> | `ClientStorage` | | Object where the refresh token will be persisted and read locally. |
| <span className="parameter-name"><span className="light-grey">config.</span>autoRefreshToken</span> | `boolean` | | When set to true, will automatically refresh token before it expires |
| <span className="parameter-name"><span className="light-grey">config.</span>autoSignIn</span> | `boolean` | | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
| <span className="parameter-name"><span className="light-grey">config.</span>devTools</span> | `boolean` | | Activate devTools e.g. the ability to connect to the xstate inspector |
| <span className="parameter-name"><span className="light-grey">config.</span>start</span> | `boolean` | | |
| Property | Type | Required | Notes |
| :----------------------------------------------------------------------------------------------------- | :------------------ | :------: | :----------------------------------------------------------------------------------------------------------------------------------- |
| <span className="parameter-name"><span className="light-grey">config.</span>backendUrl</span> | `string` | ✔️ | Nhost backend URL. |
| <span className="parameter-name"><span className="light-grey">config.</span>refreshIntervalTime</span> | `number` | | Time interval until token refreshes, in seconds |
| <span className="parameter-name"><span className="light-grey">config.</span>clientStorageType</span> | `ClientStorageType` | | Define a way to get information about the refresh token and its exipration date. |
| <span className="parameter-name"><span className="light-grey">config.</span>clientStorage</span> | `ClientStorage` | | Object where the refresh token will be persisted and read locally. |
| <span className="parameter-name"><span className="light-grey">config.</span>autoRefreshToken</span> | `boolean` | | When set to true, will automatically refresh token before it expires |
| <span className="parameter-name"><span className="light-grey">config.</span>autoSignIn</span> | `boolean` | | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
| <span className="parameter-name"><span className="light-grey">config.</span>devTools</span> | `boolean` | | Activate devTools e.g. the ability to connect to the xstate inspector |
| <span className="parameter-name"><span className="light-grey">config.</span>start</span> | `boolean` | | |
| <span className="parameter-name"><span className="light-grey">config.</span>adminSecret</span> | `string` | | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all GraphQL, Storage, and Serverless Functions requests. |
---

View File

@@ -4,7 +4,7 @@ title: NhostClient
sidebar_label: NhostClient
description: No description provided.
slug: /reference/javascript/nhost-js/nhost-client
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/core/nhost-client.ts#L14
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/core/nhost-client.ts#L19
---
# `NhostClient`
@@ -17,15 +17,16 @@ Nhost Client
**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> [`NhostClientConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-client-constructor-params)
| Property | Type | Required | Notes |
| :------------------------------------------------------------------------------------------------------------------ | :------------------ | :------: | :---------------------------------------------------------------------------------------------------------------- |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>backendUrl</span> | `string` | ✔️ | Nhost backend URL. |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>start</span> | `boolean` | | |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>devTools</span> | `boolean` | | Activate devTools e.g. the ability to connect to the xstate inspector |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoSignIn</span> | `boolean` | | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoRefreshToken</span> | `boolean` | | When set to true, will automatically refresh token before it expires |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorage</span> | `ClientStorage` | | Object where the refresh token will be persisted and read locally. |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorageType</span> | `ClientStorageType` | | Define a way to get information about the refresh token and its exipration date. |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>refreshIntervalTime</span> | `number` | | Time interval until token refreshes, in seconds |
| Property | Type | Required | Notes |
| :------------------------------------------------------------------------------------------------------------------ | :------------------ | :------: | :----------------------------------------------------------------------------------------------------------------------------------- |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>backendUrl</span> | `string` | ✔️ | Nhost backend URL. |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>adminSecret</span> | `string` | | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all GraphQL, Storage, and Serverless Functions requests. |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>start</span> | `boolean` | | |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>devTools</span> | `boolean` | | Activate devTools e.g. the ability to connect to the xstate inspector |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoSignIn</span> | `boolean` | | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>autoRefreshToken</span> | `boolean` | | When set to true, will automatically refresh token before it expires |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorage</span> | `ClientStorage` | | Object where the refresh token will be persisted and read locally. |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>clientStorageType</span> | `ClientStorageType` | | Define a way to get information about the refresh token and its exipration date. |
| <span className="parameter-name"><span className="light-grey">\_\_namedParameters.</span>refreshIntervalTime</span> | `number` | | Time interval until token refreshes, in seconds |
---

View File

@@ -4,7 +4,7 @@ title: call()
sidebar_label: call()
slug: /reference/javascript/nhost-js/functions/call
description: Use `nhost.functions.call` to call (sending a POST request to) a serverless function.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L34
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L43
---
# `call()`

View File

@@ -4,7 +4,7 @@ title: setAccessToken()
sidebar_label: setAccessToken()
slug: /reference/javascript/nhost-js/functions/set-access-token
description: Use `nhost.functions.setAccessToken` to a set an access token to be used in subsequent functions requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L73
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L82
---
# `setAccessToken()`

View File

@@ -4,7 +4,7 @@ title: NhostFunctionsClient
sidebar_label: Functions
description: No description provided.
slug: /reference/javascript/nhost-js/functions
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L11
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/functions.ts#L18
---
# `NhostFunctionsClient`
@@ -15,8 +15,9 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
**<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`NhostFunctionsConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-functions-constructor-params)
| Property | Type | Required | Notes |
| :------------------------------------------------------------------------------------- | :------- | :------: | :---- |
| <span className="parameter-name"><span className="light-grey">params.</span>url</span> | `string` | ✔️ | |
| Property | Type | Required | Notes |
| :--------------------------------------------------------------------------------------------- | :------- | :------: | :---------------------------------------------------------------------------------------- |
| <span className="parameter-name"><span className="light-grey">params.</span>url</span> | `string` | ✔️ | Serverless Functions endpoint. |
| <span className="parameter-name"><span className="light-grey">params.</span>adminSecret</span> | `string` | | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests. |
---

View File

@@ -4,7 +4,7 @@ title: request()
sidebar_label: request()
slug: /reference/javascript/nhost-js/graphql/request
description: Use `nhost.graphql.request` to send a GraphQL request. For more serious GraphQL usage in your app we recommend using a GraphQL client such as Apollo Client (https://www.apollographql.com/docs/react).
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L47
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L55
---
# `request()`

View File

@@ -4,7 +4,7 @@ title: getUrl()
sidebar_label: getUrl()
slug: /reference/javascript/nhost-js/graphql/get-url
description: Use `nhost.graphql.getUrl` to get the GraphQL URL.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L110
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L118
---
# `getUrl()`

View File

@@ -4,7 +4,7 @@ title: setAccessToken()
sidebar_label: setAccessToken()
slug: /reference/javascript/nhost-js/graphql/set-access-token
description: Use `nhost.graphql.setAccessToken` to a set an access token to be used in subsequent graphql requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L124
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L132
---
# `setAccessToken()`

View File

@@ -4,7 +4,7 @@ title: NhostGraphqlClient
sidebar_label: GraphQL
description: No description provided.
slug: /reference/javascript/nhost-js/graphql
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L14
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L20
---
# `NhostGraphqlClient`
@@ -15,8 +15,9 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
**<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`NhostGraphqlConstructorParams`](/reference/docgen/javascript/nhost-js/types/nhost-graphql-constructor-params)
| Property | Type | Required | Notes |
| :------------------------------------------------------------------------------------- | :------- | :------: | :---- |
| <span className="parameter-name"><span className="light-grey">params.</span>url</span> | `string` | ✔️ | |
| Property | Type | Required | Notes |
| :--------------------------------------------------------------------------------------------- | :------- | :------: | :---------------------------------------------------------------------------------------- |
| <span className="parameter-name"><span className="light-grey">params.</span>url</span> | `string` | ✔️ | GraphQL endpoint. |
| <span className="parameter-name"><span className="light-grey">params.</span>adminSecret</span> | `string` | | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests. |
---

View File

@@ -39,6 +39,18 @@ Define a way to get information about the refresh token and its exipration date.
Object where the refresh token will be persisted and read locally.
Recommended values:
- `'web'` and `'cookies'`: no value is required
- `'react-native'`: `import Storage from @react-native-async-storage/async-storage`
- `'cookies'`: `localStorage`
- `'custom'`: an object that defines the following methods:
- `setItem` or `setItemAsync`
- `getItem` or `getItemAsync`
- `removeItem`
- `'capacitor'`: `import { Storage } from @capacitor/storage`
- `'expo-secure-store'`: `import * as SecureStore from 'expo-secure-store'`
---
**<span className="parameter-name">autoRefreshToken</span>** <span className="optional-status">optional</span> `boolean`
@@ -62,3 +74,10 @@ Activate devTools e.g. the ability to connect to the xstate inspector
**<span className="parameter-name">start</span>** <span className="optional-status">optional</span> `boolean`
---
**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> `string`
Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all
GraphQL, Storage, and Serverless Functions requests.
---

View File

@@ -15,4 +15,12 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
**<span className="parameter-name">url</span>** <span className="optional-status">required</span> `string`
Serverless Functions endpoint.
---
**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> `string`
Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests.
---

View File

@@ -4,7 +4,7 @@ title: NhostGraphqlConstructorParams
sidebar_label: NhostGraphqlConstructorParams
description: No description provided.
displayed_sidebar: referenceSidebar
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L7
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/clients/graphql.ts#L6
---
# `NhostGraphqlConstructorParams`
@@ -15,4 +15,12 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/
**<span className="parameter-name">url</span>** <span className="optional-status">required</span> `string`
GraphQL endpoint.
---
**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> `string`
Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all requests.
---

View File

@@ -4,13 +4,15 @@ title: upload()
sidebar_label: upload()
slug: /reference/javascript/storage/upload
description: Use `nhost.storage.upload` to upload a file. The `file` must be of type [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L41
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L52
---
# `upload()`
Use `nhost.storage.upload` to upload a file. The `file` must be of type [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).
If no `bucket` is specified the `default` bucket will be used.
```ts
await nhost.storage.upload({ file })
```

View File

@@ -5,7 +5,7 @@ sidebar_label: getUrl()
slug: /reference/javascript/storage/get-url
sidebar_class_name: deprecated
description: No description provided.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L63
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L74
---
# `getUrl()`

View File

@@ -4,7 +4,7 @@ title: getPublicUrl()
sidebar_label: getPublicUrl()
slug: /reference/javascript/storage/get-public-url
description: Use `nhost.storage.getPublicUrl` to get the public URL of a file. The public URL can be used for un-authenticated users to access files. To access public files the `public` role must have permissions to select the file in the `storage.files` table.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L77
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L88
---
# `getPublicUrl()`

View File

@@ -4,7 +4,7 @@ title: getPresignedUrl()
sidebar_label: getPresignedUrl()
slug: /reference/javascript/storage/get-presigned-url
description: Use `nhost.storage.getPresignedUrl` to get a presigned URL of a file. To get a presigned URL the user must have permission to select the file in the `storage.files` table.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L99
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L110
---
# `getPresignedUrl()`

View File

@@ -4,7 +4,7 @@ title: delete()
sidebar_label: delete()
slug: /reference/javascript/storage/delete
description: Use `nhost.storage.delete` to delete a file. To delete a file the user must have permissions to delete the file in the `storage.files` table. Deleting the file using `nhost.storage.delete()` will delete both the file and its metadata.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L124
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L135
---
# `delete()`

View File

@@ -4,7 +4,7 @@ title: setAccessToken()
sidebar_label: setAccessToken()
slug: /reference/javascript/storage/set-access-token
description: Use `nhost.storage.setAccessToken` to a set an access token to be used in subsequent storage requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L145
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L156
---
# `setAccessToken()`

View File

@@ -4,7 +4,7 @@ title: setAdminSecret()
sidebar_label: setAdminSecret()
slug: /reference/javascript/storage/set-admin-secret
description: Use `nhost.storage.adminSecret` to set the admin secret to be used for subsequent storage requests. This is useful if you want to run storage in "admin mode".
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L163
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L174
---
# `setAdminSecret()`

View File

@@ -4,7 +4,7 @@ title: HasuraStorageClient
sidebar_label: Storage
description: No description provided.
slug: /reference/javascript/storage
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L15
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L25
---
# `HasuraStorageClient`
@@ -13,6 +13,6 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storag
---
**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `{ url: string }`
**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `NhostStorageConstructorParams`
---

View File

@@ -15,12 +15,13 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nextjs/src/in
**<span className="parameter-name">params</span>** <span className="optional-status">required</span> [`NhostNextClientConstructorParams`](/reference/docgen/nextjs/types/nhost-next-client-constructor-params)
| Property | Type | Required | Notes |
| :----------------------------------------------------------------------------------------------------- | :-------- | :------: | :---------------------------------------------------------------------------------------------------------------- |
| <span className="parameter-name"><span className="light-grey">params.</span>backendUrl</span> | `string` | ✔️ | Nhost backend URL. |
| <span className="parameter-name"><span className="light-grey">params.</span>devTools</span> | `boolean` | | Activate devTools e.g. the ability to connect to the xstate inspector |
| <span className="parameter-name"><span className="light-grey">params.</span>autoSignIn</span> | `boolean` | | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
| <span className="parameter-name"><span className="light-grey">params.</span>autoRefreshToken</span> | `boolean` | | When set to true, will automatically refresh token before it expires |
| <span className="parameter-name"><span className="light-grey">params.</span>refreshIntervalTime</span> | `number` | | Time interval until token refreshes, in seconds |
| Property | Type | Required | Notes |
| :----------------------------------------------------------------------------------------------------- | :-------- | :------: | :----------------------------------------------------------------------------------------------------------------------------------- |
| <span className="parameter-name"><span className="light-grey">params.</span>backendUrl</span> | `string` | ✔️ | Nhost backend URL. |
| <span className="parameter-name"><span className="light-grey">params.</span>adminSecret</span> | `string` | | Admin secret. When set, it is sent as an `x-hasura-admin-secret` header for all GraphQL, Storage, and Serverless Functions requests. |
| <span className="parameter-name"><span className="light-grey">params.</span>devTools</span> | `boolean` | | Activate devTools e.g. the ability to connect to the xstate inspector |
| <span className="parameter-name"><span className="light-grey">params.</span>autoSignIn</span> | `boolean` | | When set to true, will parse the url on startup to check if it contains a refresh token to start the session with |
| <span className="parameter-name"><span className="light-grey">params.</span>autoRefreshToken</span> | `boolean` | | When set to true, will automatically refresh token before it expires |
| <span className="parameter-name"><span className="light-grey">params.</span>refreshIntervalTime</span> | `number` | | Time interval until token refreshes, in seconds |
---

View File

@@ -4,7 +4,7 @@ title: useAccessToken()
sidebar_label: useAccessToken()
slug: /reference/nextjs/use-access-token
description: Use `useAccessToken` to get the access token of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L119
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAccessToken.ts#L15
---
# `useAccessToken()`

View File

@@ -5,7 +5,7 @@ sidebar_label: useAuthLoading()
slug: /reference/nextjs/use-auth-loading
sidebar_class_name: deprecated
description: No description provided.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L57
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAuthLoading.ts#L14
---
# `useAuthLoading()`

View File

@@ -4,7 +4,7 @@ title: useAuthenticated()
sidebar_label: useAuthenticated()
slug: /reference/nextjs/use-authenticated
description: Use `useAuthenticated` to get the authentication status of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L94
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAuthenticated.ts#L15
---
# `useAuthenticated()`

View File

@@ -4,7 +4,7 @@ title: useAuthenticationStatus()
sidebar_label: useAuthenticationStatus()
slug: /reference/nextjs/use-authentication-status
description: Use `useAuthenticationStatus` to get the authentication status for the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L70
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useAuthenticationStatus.ts#L13
---
# `useAuthenticationStatus()`

View File

@@ -4,7 +4,7 @@ title: useChangeEmail()
sidebar_label: useChangeEmail()
slug: /reference/nextjs/use-change-email
description: Use the hook `useChangeEmail` to change email for the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L69
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useChangeEmail.ts#L45
---
# `useChangeEmail()`

View File

@@ -4,7 +4,7 @@ title: useChangePassword()
sidebar_label: useChangePassword()
slug: /reference/nextjs/use-change-password
description: Use the hook `useChangePassword` to change password for the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L137
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useChangePassword.ts#L49
---
# `useChangePassword()`

View File

@@ -4,7 +4,7 @@ title: useConfigMfa()
sidebar_label: useConfigMfa()
slug: /reference/nextjs/use-config-mfa
description: No description provided.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L514
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useConfigMfa.ts#L22
---
# `useConfigMfa()`

View File

@@ -4,7 +4,7 @@ title: useDecodedAccessToken()
sidebar_label: useDecodedAccessToken()
slug: /reference/nextjs/use-decoded-access-token
description: Use the hook `useDecodedAccessToken` to get the decoded access token of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L558
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useDecodedAccessToken.ts#L17
---
# `useDecodedAccessToken()`

View File

@@ -4,7 +4,7 @@ title: useHasuraClaim()
sidebar_label: useHasuraClaim()
slug: /reference/nextjs/use-hasura-claim
description: Use the hook `useHasuraClaim` to get the value of a specific Hasura claim of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L589
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useHasuraClaim.ts#L14
---
# `useHasuraClaim()`

View File

@@ -4,7 +4,7 @@ title: useHasuraClaims()
sidebar_label: useHasuraClaims()
slug: /reference/nextjs/use-hasura-claims
description: Use the hook `useHasuraClaims` to get the Hasura claims of the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L573
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useHasuraClaims.ts#L14
---
# `useHasuraClaims()`

View File

@@ -5,7 +5,7 @@ sidebar_label: useNhostAuth()
slug: /reference/nextjs/use-nhost-auth
sidebar_class_name: deprecated
description: No description provided.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/deprecated.ts#L10
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostAuth.ts#L10
---
# `useNhostAuth()`

View File

@@ -4,7 +4,7 @@ title: useNhostBackendUrl()
sidebar_label: useNhostBackendUrl()
slug: /reference/nextjs/use-nhost-backend-url
description: Use the hook `useNhostBackendUrl` to get the Nhost backend URL.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L43
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostBackendUrl.ts#L15
---
# `useNhostBackendUrl()`

View File

@@ -4,7 +4,7 @@ title: useNhostClient()
sidebar_label: useNhostClient()
slug: /reference/nextjs/use-nhost-client
description: Use the hook `useNhostClient` to get the Nhost JavaScript client (https://docs.nhost.io/reference/javascript).
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L20
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostClient.ts#L17
---
# `useNhostClient()`

View File

@@ -4,7 +4,7 @@ title: useProviderLink()
sidebar_label: useProviderLink()
slug: /reference/nextjs/use-provider-link
description: Use the hook `useProviderLink` to get an OAuth provider URL that can be used to sign in users.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L281
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useProviderLink.ts#L31
---
# `useProviderLink()`

View File

@@ -4,7 +4,7 @@ title: useResetPassword()
sidebar_label: useResetPassword()
slug: /reference/nextjs/use-reset-password
description: Use the hook `useResetPassword` to reset the password for a user. This will send a reset password link in an email to the user. When the user clicks on the reset-password link the user is automatically signed in and can change their password using the hook `useChangePassword`.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L195
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useResetPassword.ts#L53
---
# `useResetPassword()`

View File

@@ -4,7 +4,7 @@ title: useSendVerificationEmail()
sidebar_label: useSendVerificationEmail()
slug: /reference/nextjs/use-send-verification-email
description: Use the hook `useSendVerificationEmail` to send a verification email. The verification email is sent to the user's email address and includes a link to verify the email address.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/user.ts#L481
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSendVerificationEmail.ts#L58
---
# `useSendVerificationEmail()`

View File

@@ -4,7 +4,7 @@ title: useSignInAnonymous()
sidebar_label: useSignInAnonymous()
slug: /reference/nextjs/use-sign-in-anonymous
description: No description provided.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L228
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInAnonymous.ts#L9
---
# `useSignInAnonymous()`

View File

@@ -4,7 +4,7 @@ title: useSignInEmailPassword()
sidebar_label: useSignInEmailPassword()
slug: /reference/nextjs/use-sign-in-email-password
description: Use the hook `useSignInEmailPassword` to sign in a user using email and password.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L66
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInEmailPassword.ts#L49
---
# `useSignInEmailPassword()`

View File

@@ -4,7 +4,7 @@ title: useSignInEmailPasswordless()
sidebar_label: useSignInEmailPasswordless()
slug: /reference/nextjs/use-sign-in-email-passwordless
description: Use the hook `useSignInEmailPasswordless` to sign in a user using passwordless email (Magic Link).
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/authentication.ts#L172
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignInEmailPasswordless.ts#L40
---
# `useSignInEmailPasswordless()`

View File

@@ -4,7 +4,7 @@ title: useSignOut()
sidebar_label: useSignOut()
slug: /reference/nextjs/use-sign-out
description: Use the hook `useSignOut` to sign out the user.
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/hooks/common.ts#L147
custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useSignOut.ts#L29
---
# `useSignOut()`

Some files were not shown because too many files have changed in this diff Show More