Migration of sample app to Nexjs SDK v4 #180
Conversation
| # Your Auth0 tenant domain | ||
| AUTH0_DOMAIN='YOUR_AUTH0_DOMAIN.auth0.com' | ||
| # The base url of your application | ||
| APP_BASE_URL='http://localhost:3000' |
There was a problem hiding this comment.
Can we keep the order, so we simplify the diff?
There was a problem hiding this comment.
Order isnt maintained
frederikprijck
left a comment
frederikprijck
left a comment
There was a problem hiding this comment.
Can we move updating nextjs to v14 or 15 in another PR?
| "@babel/preset-typescript" | ||
| ], | ||
| "plugins": [] | ||
| } |
There was a problem hiding this comment.
Why is this neccessary to update the SDK?
| For the **External API** page to work, you will need to [create an API](https://auth0.com/docs/authorization/apis) using the [management dashboard](https://manage.auth0.com/#/apis). This will give you an API Identifier that you can use in the `AUTH0_AUDIENCE` environment variable below. Then you will need to [add a permission](https://auth0.com/docs/get-started/dashboard/add-api-permissions) named `read:shows` to your API. | ||
|
|
||
| If you do not wish to use an API or observe the API call working, you should not specify the `AUTH0_AUDIENCE` and `AUTH0_SCOPE` values in the next steps. | ||
| If you do not wish to use an API or observe the API call working, you should not specify the `AUTH0_AUDIENCE` value in the next steps. |
| The project needs to be configured with your Auth0 Domain, Client ID and Client Secret for the authentication flow to work. | ||
|
|
||
| To do this, first copy `.env.local.example` into a new file in the same folder called `.env.local`, and replace the values with your own Auth0 application credentials (see more info about [loading environmental variables in Next.js](https://nextjs.org/docs/basic-features/environment-variables)): | ||
| To do this, first copy `.env.local.example` into a new file in the same folder called `.env.local`, and replace the values with your own Auth0 application credentials: |
There was a problem hiding this comment.
Why is this link (https://nextjs.org/docs/basic-features/environment-variables) no longer relevant?
| import initFontAwesome from '../utils/initFontAwesome'; | ||
|
|
||
| // Initialize FontAwesome icons | ||
| initFontAwesome(); |
There was a problem hiding this comment.
Why is this neccessary for updating our SDK?
| const { isAuthenticated, user, guardComponent } = useAuthGuard(); | ||
|
|
||
| // If not authenticated or loading, show guard component | ||
| if (!isAuthenticated) return guardComponent; |
There was a problem hiding this comment.
I think introducing useAuthGuard here causes unneccesary complications in the diff.
| window.location.href = '/auth/login'; | ||
| } | ||
| guardComponent = <Loading />; | ||
| } |
There was a problem hiding this comment.
I think guardComponent is not the best idea in the sense that it isnt clear what it actually is where used.
If customers want that, they can, but let's refrain from adding this complexity in our sample but stay explicit.
| transformIgnorePatterns: [ | ||
| "/node_modules/(?!highlight\\.js)" | ||
| ] | ||
| }; No newline at end of file |
There was a problem hiding this comment.
Why do we need this ?
| authorizationParameters: { | ||
| scope: "openid profile email offline_access read:shows", | ||
| } | ||
| }); No newline at end of file |
There was a problem hiding this comment.
Why do we have this ts file, and the js file?
2 participants
Migration of sample app to Nexjs SDK v4