This is a Next.js project bootstrapped with create-next-app.
- next.js
- usePathname
- useRouter
- useSearchParams
- typescript
- as keyword
- react
- tailwind css
- graphbase Db using graphql to query API
- in graphql using client.request is used to send query request to api
- based on query it performs operation and provides response. hence no need to specify http methods like get or post
- NextAuth.js: useCLient component => not rendered in server
4.1
getProvider, signIn4.2 For each signin one provider 4.3 GOOGLE OAUTH
Before you begin, ensure you have met the following requirements:
- Node.js: Make sure you have Node.js installed on your machine. You can download it from nodejs.org.
-
Create a new Next.js project using
create-next-app:npx create-next-app@latest ./
This command bootstraps a new Next.js project in the current directory. With the option to use
tailwind cssselected
Install the following packages and dependencies:
npm install @headlessui/react cloudinary jsonwebtoken @types/jsonwebtoken graphql-request next-authnpm i @grafbase/sdk --save-devnpx grafbase init --config-format typescriptThese packages provide essential functionality for your project.
-
Clone the repo:
git clone https://github.com/your-username/your-project.git
-
Navigate to the project folder:
cd your-project -
Install dependencies:
npm install # or yarn # or pnpm install # or bun install
To start the development server, run the following command:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devTo start grafbase dev. enviornment on WINDOWS(0.24)
npx grafbase devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Flexibble.-.Google.Chrome.2023-10-13.20-32-00.mp4
Contributions are what make the open-source community such an amazing place to be, learn, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/YourFeature) - Commit your Changes (
git commit -m 'Add some YourFeature') - Push to the Branch (
git push origin feature/YourFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Your Name - @YourTwitter - [email protected]
Project Link: https://github.com/your-username/your-project
- x-api-key If you're making a request on the backend, and don't need to filter data based on the owner, then you can use an API Key with requests.
- Auth, bearer If you're making a request to the Grafbase GraphQL API from your frontend (React, Vue, Svelte, etc.) then you will need to configure an auth provider (Clerk, Auth0, NextAuth.js, etc.).
Grafbase is not a user management platform, so you will need to bring your own users with platforms like Clerk, NextAuth.js, and Auth0.
- create a jwt token for some time period (lib>sessions.ts) by Provider which is NextAuth.js
- GET method is created at route
NXT_PRJ2\app\api\auth\token. - Since it is next js the ROUTING DEFINES THE URL STRUCTURE. Therefore, we can access GET method specified at route
localhost:\\3000\api\auth\tokenusingfetchToken()in >lib>action.ts
- THIS IS DONE AT by providing token to
PRojectForm>HandleSubmit>CreateProjectfunction client.setHeader("Authorization",Bearer ${token});authorises the user from the provider token EXTRA: The "Authorization: Bearer TOKEN" mechanism in an HTTP header doesn't directly specify which user to authorize. It's just a standardized way to include a token with an HTTP request, and the server receiving the request needs to interpret the token to determine which user or entity it belongs to.
Here's how it typically works:
-
Token Generation: When a user logs in or authenticates with your application, they receive an authentication token. This token is often generated and provided by an authentication system or service, such as NextAuth.js, Auth0, Firebase, or any custom authentication service.
-
Token Content: The token contains information about the authenticated user or the entity it represents. This information is usually in the form of claims, which can include user identifiers, roles, permissions, and any other relevant data.
-
Token Encoding: The token is typically encoded, often as a JSON Web Token (JWT). JWTs are self-contained and include the necessary claims and a digital signature.
-
Authorization Header: The client includes the token in the "Authorization" header of an HTTP request, following the "Bearer" scheme, like this: "Authorization: Bearer TOKEN."
-
Server Verification: The server that receives the request must validate the token's authenticity and verify its content. This involves decoding the token, verifying its digital signature, and checking its claims, especially the user identifier.
-
User Identification: After verifying the token, the server can identify which user is making the request based on the user identifier in the token's claims.
-
Authorization Logic: The server then checks whether the identified user has the necessary permissions to perform the requested action. It may use the information in the token's claims, consult a database, or rely on other authorization mechanisms.
In summary, the "Bearer TOKEN" in the "Authorization" header is simply a means of including the token with the request. The server decodes and verifies the token to identify the user and determine whether they have the appropriate permissions to perform the action. The actual logic for associating the token with a user and authorizing the request is implemented on the server, typically in the authentication and authorization middleware or within the GraphQL resolver functions.
using startCursor