Add Next.js docs #5502
Open
Add Next.js docs #5502
+424
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Diff output filesNo diff |
kvz
reviewed
Nov 13, 2024
| can be a security risk**. Signature Authentication is a security measure that | ||
| can prevent outsiders from tampering with your Assembly Instructions. | ||
|
|
||
| Generating a signature should be done on the server to avoid leaking secrets. |
There was a problem hiding this comment.
Suggested change
| Generating a signature should be done on the server to avoid leaking secrets. | |
| Generating a signature should be done on the server to avoid leaking secrets. The signature itself can then be freely passed around as proof that whoever generated it, had the secrets only known to Transloadit and you as a customer. It is only valid for the instructions and time duration that the signature was generated for. |
|
|
||
| Before continuing you should have a [Transloadit](https://transloadit.com) | ||
| account and a | ||
| [template](https://transloadit.com/docs/getting-started/my-first-app/) setup. |
There was a problem hiding this comment.
Suggested change
| [template](https://transloadit.com/docs/getting-started/my-first-app/) setup. | |
| [Template](https://transloadit.com/docs/getting-started/my-first-app/) setup. |
| <Tabs> | ||
| <TabItem value="app" label="App Router" default> | ||
|
|
||
| ```ts |
There was a problem hiding this comment.
Should we mention somewhere what filepath we intend to save this in?
| import '@uppy/dashboard/dist/style.min.css'; | ||
|
|
||
| function createUppy() { | ||
| return new Uppy().use(Tus, { endpoint: '/api/upload' }); |
There was a problem hiding this comment.
Looks like we're using tabs for indentation, if we switch to tabs it should be across the board i think, not just this doc.
| }, | ||
| template_id: templateId, | ||
| fields: { | ||
| // You can use this in your template. |
There was a problem hiding this comment.
Suggested change
| // You can use this in your template. | |
| // This becomes available in your Template as `${fields.userId}` and could be used to have a storage directory per user for example |
| // your other params like notify_url, etc. | ||
| }); | ||
|
|
||
| const signatureBytes = crypto |
There was a problem hiding this comment.
Suggested change
| const signatureBytes = crypto | |
| // Typically, here you would deny generating a signature for improper use (user not logged in, user tried to save data under unowned path, etc. | |
| const signatureBytes = crypto |
| // your other params like notify_url, etc. | ||
| }); | ||
|
|
||
| const signatureBytes = crypto |
There was a problem hiding this comment.
Suggested change
| const signatureBytes = crypto | |
| // Typically, here you would deny generating a signature for improper use (user not logged in, user tried to save data under unowned path, etc. | |
| const signatureBytes = crypto |
| // You can send meta data along for use in your template. | ||
| // https://transloadit.com/docs/topics/assembly-instructions/#form-fields-in-instructions | ||
| const { meta } = uppy.getState(); | ||
| const body = JSON.stringify({ userId: meta.userId }); |
There was a problem hiding this comment.
I think userId is not an ideal example from a security perspective. It's better to get the userId from the session on the server side than a post payload for tampering reasons. How about... the example becomes about avatar uploading, and a post field we accept is autoCropFace or sth?
|
|
||
| :::warning | ||
|
|
||
| The server-side examples are simplified for demostration purposes and assume a |
There was a problem hiding this comment.
Suggested change
| The server-side examples are simplified for demostration purposes and assume a | |
| The server-side examples are simplified for demonstration purposes and assume a |
|
|
||
| # Next.js | ||
|
|
||
| Integration guide for the [React][] components for the Uppy UI plugins and |
There was a problem hiding this comment.
Should this intro say something about Next?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #1958