3 |
4 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | // https://nuxt.com/docs/guide/concepts/typescript
3 | "extends": "./.nuxt/tsconfig.json"
4 | }
5 |
--------------------------------------------------------------------------------
/iam/ui/img/nuxt-iam-logo-symbol.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeremycoder/nuxt-iam/HEAD/iam/ui/img/nuxt-iam-logo-symbol.png
--------------------------------------------------------------------------------
/pages/iam/dashboard/index.vue:
--------------------------------------------------------------------------------
1 |
2 | This is your dashboard.
5 |This is a sample page
5 |
4 | NuxtIAM
5 | Today's date comes from a plugin: {{ today }}
5 |{{ tempPassword }}
5 | This is a protected page. If you can see it, then you are logged in!
5 |This is a problem on our end. Contact customer service.
7 |We don't have the page you're looking for.
11 |Contact us to fix it.
15 |9 | Quickly build an amazing app with the Nuxt IAM starter kit. It comes 10 | with Nuxt IAM auth framework to help you get started quickly. 11 |
12 | 24 |This is your admin center.
5 |5 | Nuxt IAM is a Nuxt application and comes ready to run. All you need to add 6 | is a database. 7 |
8 |https://github.com/jeremycoder/nuxt-iam, and navigate to
21 | the root directory.
22 | .env.example file and create a
25 | .env file
26 | yarn or yarn install..env file. Nuxt IAM
30 | curently supports MySQL, but can be modified to support other databases.
31 | See
32 | Prisma
36 | for more information.
37 | npx prisma migrate dev. Name your migration
41 | initial_migration or something similar
42 | yarn dev, and you're good to go!
47 | More
52 | Learn more about how Nuxt IAM works by looking at the
53 |
© 2022 My Company, Inc
10 |6 | Nuxt IAM, which stands for 7 | Nuxt Identity and Access Management, is an 8 | authentication and authorization framework for Nuxt that allows you to 9 | secure your app with industry best practices. Nuxt IAM, adds 10 | authentication and authorization logic to your Nuxt app. 11 |
12 |13 | See a fully functional example app. 14 |
15 | 16 |Nuxt IAM adds the following features to your application:
17 |COPYRIGHT 2023 Nuxt-IAM
32 |33 | Permission is hereby granted, free of charge, to any person obtaining a 34 | copy of this software and associated documentation files (the 35 | "Software"), to deal in the Software without restriction, including 36 | without limitation the rights to use, copy, modify, merge, publish, 37 | distribute, sublicense, and/or sell copies of the Software, and to 38 | permit persons to whom the Software is furnished to do so, subject to 39 | the following conditions: The above copyright notice and this permission 40 | notice shall be included in all copies or substantial portions of the 41 | Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY 42 | KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 43 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 44 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 45 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 46 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 47 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 48 |
49 |{{ text }}
7 || # | 10 |{{ objectKey }} | 11 |edit | 12 |delete | 13 |
|---|---|---|---|
| {{ rowIndex + 1 }} | 18 |20 | {{ value }} 21 | | 22 |
23 | |
25 |
26 | |
28 |
16 | Deleting all will force every user to reauthenticate after their access 17 | tokens expire. 18 |
19 | 20 | 21 |Update your profile
6 |
35 | Already have an account?
36 |
5 | The following is en explanation of some of the logic and components of 6 | Nuxt IAM frontend. 7 |
8 |10 | Nuxt IAM adds several pages to your apps frontend. The pages are wrappers 11 | around components. Use these pages and components as is, or as starting 12 | points for making your app great. The following routes are added to your 13 | Nuxt front end. Find them in your pages directory: 14 |
15 |60 | Nuxt IAM adds the following components to your Nuxt application. Most of 61 | the components are wrapped in pages. 62 |
63 |96 | Nuxt IAM uses composables as a bridge between the frontend and the 97 | backend. We recommend using composables as well. Composables contain the 98 | functions that send data to the API, and receive data from the API. 99 |
100 |Backend <--- composables <--- Frontend
101 |Backend ---> composables ---> Frontend
102 |6 | Nuxt IAM, which stands for 7 | Nuxt Identity and Access Management, is an 8 | authentication and authorization framework for Nuxt that allows you to 9 | secure your app with industry best practices. Nuxt IAM, adds 10 | authentication and authorization logic to your Nuxt app. 11 |
12 |13 | See a fully functional example app. 14 |
15 | 16 |Nuxt IAM adds the following features to your application:
17 |COPYRIGHT 2023 Nuxt-IAM
105 |106 | Permission is hereby granted, free of charge, to any person obtaining a 107 | copy of this software and associated documentation files (the 108 | "Software"), to deal in the Software without restriction, including 109 | without limitation the rights to use, copy, modify, merge, publish, 110 | distribute, sublicense, and/or sell copies of the Software, and to 111 | permit persons to whom the Software is furnished to do so, subject to 112 | the following conditions: The above copyright notice and this permission 113 | notice shall be included in all copies or substantial portions of the 114 | Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY 115 | KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 116 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 117 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 118 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 119 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 120 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 121 |
122 |Update your settings here.
5 |Please click the button below to verify your email
12 | 24 |27 | Please check your email. Check your spam folder too. Click the 28 | link in the email to verify your email. You should receive it 29 | within 15 minutes. 30 |
31 |6 | Understanding the following concepts will help you work with Nuxt IAM 7 | faster. 8 |
9 |11 | Nuxt IAM is both frontend and backend. The main authentication and 12 | authorization logic takes place in the backend. Nuxt IAM adds 13 | authentication and authorization components, pages, api routes, and 14 | logic to your Nuxt app allowing your app to have authentication and 15 | authorization logic. All the components, pages, api routes, and logic 16 | are 100% customizable so you can change things any way you want. 17 |
18 |20 | Nuxt IAM uses Nuxt's server engine 21 | Nitro 22 | and the entire backend is built on it. Nuxt IAM adds the following 23 | directories to your server/api directory. 24 |
25 |36 | Nuxt IAM uses the Backend For Frontend (BFF) architectural pattern to 37 | increase the security of your Nuxt application. A BFF pattern allows 38 | Nuxt IAM to provide the best security practices for any client. Nuxt IAM 39 | differentiates between two types of clients: 40 | browsers and apps. It does this by 41 | requiring that every request contain the 42 | client-platform header. 43 |
44 |45 | Every client needs to send the client-platform header 46 | on every request. 47 |
48 |
49 | client-platform is a required header and
50 | it must be sent with every request. Client platform allows Nuxt IAM to
51 | provide the best practices for securing your app.
52 | client-platform must be:
53 |
app: Use app if the request is coming from a non-browser
58 | such as a mobile app, tablet, or a tool like POSTMAN. Access and
59 | refresh tokens will be sent in the response headers.
60 | This is designed to be used in production.
61 | browser: Use browser if the request is coming from a browser.
65 | Access and refresh tokens will be sent in
66 | secure, httpOnly cookies. This is designed to be used
67 | in production.
68 | browser-dev: Use browser-dev if the request is coming from a
72 | browser in a development environment. Access and
73 | refresh tokens are sent in unsecure cookies. Use only
74 | in development.
75 | 79 | Nuxt IAM requires a database to operate successfully, and uses 80 | Prisma as its object relation mapper 81 | (ORM). For database configuration, please see 82 | Configuration. 83 |
84 |86 | Nuxt IAM uses signed JSON web tokens (JWT) as part of its security. 87 | There are two types of tokens used: access tokens and 88 | refresh tokens. Access tokens allow a user to access a 89 | restricted resource, and refresh tokens allow a user to get a new pair 90 | of tokens. 91 |
92 |94 | Access tokens are JWT tokens that grant an authenticated user access to 95 | a particular resource. For example, if a user wants to access their 96 | profile, they need to login with their correct email and password 97 | combination. If successful, Nuxt IAM will create an access token and 98 | refresh token and send them back to the client. 99 |
100 |101 | If the client is an app, the tokens will be sent in the 102 | header as iam-access-token for the access token, and 103 | iam-refresh-token for the refresh token. 104 |
105 |106 | If the client is a browser, the tokens will be sent in 107 | cookies. If the client-platform is browser, the cookies will be secure, 108 | if the client-platform is browser-dev, the cookies will be unsecure. 109 |
110 |111 | Access tokens expire every 15 minutes. Once an access 112 | token expires, the client will be unable to access the resource, and 113 | will need to log in. New tokens can be obtained using a valid refresh 114 | token. If you use the pages provided by Nuxt IAM, your access and 115 | refresh tokens will be automatically replaced once Nuxt IAM detects that 116 | the access token has expired. 117 |
118 |If your refresh token expires, you must log in again.
119 |
121 | Refresh tokens are JWT tokens that are used to get new access and
122 | refresh tokens. They expire every 14 days. If your
123 | access token expires, you'll need to login again. You can get a new
124 | set of access and refresh tokens when you send a POST request to
125 | /api/iam/authn/refresh with an unexpired refresh token. If
126 | your refresh token has expired, you will not be able to get a new set of
127 | tokens and you'll need to login.
128 |
130 | Every authenticated user can only have one active refresh token at a 131 | time. 132 |
133 |
135 | If your client platform is browser or
136 | browser-only, Nuxt IAM will automatically refresh your
137 | tokens if it detects that your access token has expired, and that your
138 | refresh token is not expired. When using a browser, you really don't
139 | have to concern yourself with tokens.
140 |
145 | Nuxt IAM keeps track of expired refresh tokens. Let's say you you 146 | have a one refresh token in the database. If you refresh your tokens, 147 | you get a new set of tokens, and the old refresh token will be 148 | deactivated. If you or someone else steals the old refresh token and 149 | attempts to get a new set of tokens using that refresh token, all your 150 | refresh tokens will be deactivated, and you will have to login after 151 | your access token expires. This feature protects your account against 152 | stolen tokens. 153 |
154 |156 | Nuxt IAM uses sessions to manage user sessions. Every user can only have 157 | one session at a time. 158 |
159 |
5 | The following are some of the features of Nuxt IAM. This page assumes you
6 | are using all the features of Nuxt IAM. If you're looking for API
7 | routes, please go to
8 |
12 | Nuxt IAM comes with pages and an api that allow you to register a user. 13 |
14 |
16 | To register a user locally, that is using email and
17 | password , navigate to the page
18 | /iam/register. See a
19 | live example
20 |
23 | To verify user email registration, you need to go to your
24 | .env file, setup your email sender, and set the
25 | .env variable
26 | IAM_VERIFY_REGISTRATIONS="true". Please see
27 |
32 | To register using Google, you'll need to have already set up your 33 | Google console 36 | app and obtained your credentials. It's free. You'll need your 37 | Google client id. 38 |
39 |
40 | Then set your .env variables
41 | IAM_ALLOW_GOOGLE_AUTH="true" and
42 | IAM_GOOGLE_CLIENT_ID="12345". The 12345 represents
43 | your Google client id.
44 |
46 | After that, navigate to the /iam/login page, and click the
47 | Google button. See a
48 | live example
49 |
52 | Nuxt IAM comes with pages and an api that allow you to login as a user. 53 |
54 |
56 | To login as a user locally, that is using email and
57 | password , navigate to the page /iam/login.
58 | See a live example
59 |
62 | To login using Google, navigate to the /iam/login page, and
63 | click the Google button. Nuxt IAM will create an account for you using
64 | data from your Google account. See a
65 | live example
66 |
69 | For this feature to work, you need to
70 | configure your email sender. Please see
71 | /iam/reset. See a
73 | live example.
74 |
77 | After you have successfully logged in, you'll be taken to your 78 | dashboard. See a 79 | live example 80 |
81 |83 | The user profile is a child page of the dashboard and contains basic 84 | information about your user account. It allows you to change some 85 | information about yourself. 86 |
87 |89 | The user settings allow you to change your password and delete your 90 | account. Deleting your account will permanently delete your account and 91 | remove all associated data. Soft deletes have not been 92 | implemented yet. 93 |
94 |96 | Clicking the user log out link will log you out of your profile area. This 97 | removes all cookies and deactivates your refresh token so that you'll 98 | need to log in to get back into your account. 99 |
100 |102 | The admin area is an area in the profile that is reserved for user 103 | administration. Nuxt IAM is designed to allow you to configure it how you 104 | want. 105 |
106 |108 | All users who register with Nuxt IAM do not have access 109 | to the admin area. Nuxt IAM does not follow the policy of the first 110 | registered user automatically getting administrator rights as this is 111 | considered unsafe because a bad actor can assume that the very first 112 | record in the database belongs to the admin user. 113 |
114 |
115 | The only way to get admin access if you're the
116 | first user, is to modify your record in the database. To
117 | get admin access, add this value to your
118 | permissions field in the users table:
119 | canAccessAdmin. Any person who has that has
120 | canAccessAdmin in their permissions field, will be able to
121 | access the admin area.
122 |
124 | After you have admin access, you can give any user admin access as well by 125 | modifying their record. 126 |
127 |
129 | Nuxt IAM has a few roles and permissions. Nuxt IAM uses both role-based
130 | access control and attribute-based access control. Nuxt IAM has three
131 | types of roles: SUPER_ADMIN, ADMIN, and
132 | GENERAL.
133 |
Nuxt IAM comes with three basic roles.
136 |SUPER_ADMIN: Is required to perform access the
139 | ADMIN: Has no privileges. You may add privileges if you
144 | desire.
145 | GENERAL: Is considered to have the lowest level privilege.
148 | A user with this role, can only only access their account.
149 |
153 | The only permission that comes with Nuxt IAM is
154 | canAccessAdmin. Any user with this permission can access the
155 | admin area.
156 |
158 | The most privileged
159 | user is the one has a role of SUPER_ADMIN and
161 | has canAccessAdmin permission attribute.
163 | When you add more permission attributes, separate them by commas. For
164 | example canAccessAdmin, hasDeleteAuthority, canRemoveUser.
165 |
168 | When a user who has admin access log in, they can view all users, add 169 | users, modify user data, and delete users. 170 |
171 |173 | A user with admin access can also remove individual refresh tokens from 174 | users. Removing a refresh token means that that user will not be able to 175 | have their tokens automatically refreshed and will need to log in once 176 | their access token expires. A user with admin access can also remove all 177 | refresh tokens. This is considered a safety measure. Removing all refresh 178 | tokens will force every user in the system to 179 | reauthenticated (login) once their access token expires. Access tokens 180 | last only 15 minutes. 181 |
182 |184 | Most of Nuxt IAM is written in TypeScript. The Vue components are mostly 185 | written in JavaScript. 186 |
187 |189 | Nuxt IAM uses 190 | Bootstrap 5 193 | CSS framework, and some other lower versions of Bootstrap for its frontend 194 | needs. You don't have to use Bootstrap. You're welcome to use any 195 | CSS framework you need. Nuxt IAM may change to another CSS framework in 196 | the future. 197 |
198 |199 | Bootstrap was chosen because most of it can be run from a simple CDN call. 200 | All pages or components that run Bootstrap call it on the page alone. The 201 | CSS framework is not added in the Node modules so that it does not 202 | intefere with other frameworks you may want to use such as Tailwind. 203 |
204 |205 | Calling Bootstrap from each page is not the most efficient way of using a 206 | CSS framework, but it allows Nuxt IAM to remain isolated from the rest of 207 | your app, and not interfere with already installed CSS frameworks you may 208 | have. 209 |
210 |