Refresh tokens are helpful stateless technology, because they have longer time of expiry than the secure tokens, and can be used to send requests back to the server for reissuing of normal secure tokens.
The primary aim of a refresh token is to regenerate the authentication for the user in such way, that the user doesn't need to manually re-login into the system.
The flow of using refresh together with secure tokens is the following:
Initially we're making a request containing valid combination of user/password payload to a server. After performing checks the server is generating and returning to us a pair of secure and refresh tokens. It is sending the refresh token as an http only cookie, which cannot be read or modified by the browser. Later in the process of work, when the secure token is about to expire we use the cookie containing the refresh token information to make request to the server. The server checks its validity in its database and sends back to the client a new pair of refresh secure tokens.
In summary we use refresh tokens when our access token is expired, and we would like to renew it as well as to renew the refresh token. That is why it has longer expiration time than the access token. Keep in mind that, when the refresh token is expired we need to manually re-login the user.
For the technical implementation of refresh tokens is very good if you manage to place the refresh token inside of http-only cookie, because on the client side JavaScript and other techniques cannot exploited to modify this type of cookie. In rare cases, if attackers send a refresh request to the server they cannot get the newly issued secure token.
If you would like to increase the security of the generated tokens you can also include browser and os fingerprinting inside of the token payload.
For the authentication server it is good it can perform the following specific actions:
to be able to generate access and refresh tokens
to revoke tokens(to delete the refresh token).
When a refresh token is generated it usually goes through the following process:
check whether there is an user id in the internal database with a token,
check the validity of the token,
check the number of tokens for this user: how many they are, because one user can generate and overflow our database and this is also a type of an attack.
When everything is ready we can save the newly generated token into our database.
Access token is used when performing service requests
secret key is stored both in the server and in the JWT payload: const Token = jwt.sign( { user: myUser }, // payload jwtSecretKey, { expiresIn: '30d' } ); on client side resides in local storage
1) Client side authentication - POST request to get the token: payload: { ‘username:req.body.user’, ’password:req.body.password’ }
request service with the token: 3) Server side authorization - // const token = req.get('Authorization'); // token = token.slice(7, token.length);
app.route(‘/secret_url’).post( jwtVerifier, (req,res)=>res.send(‘info’)); // secret information
Refresh token is used when access token is expired in order to produce new access and refresh tokens.
has longer expire time than the access token, if expires the user is logged out.
on client side resides in httponly cookie, so client cannot modify it (attacker cannot get the new JWT refresh token)
includes browser fingerprint for extra security
The auth server can perform specific actions:
generate new access and refresh tokens
refresh tokens:
check the user_id from the http transmitted refresh token cookie against internal refresh tokens list in order to regenerate new access & refresh tokens:
check refresh token validity (by comparing user_id inside the issued token list for the requested user)
prune the number of generated refresh tokens (because the user can be logged in from different devices)
save in a db the generated refresh tokens
revoke token (delete refresh token)
The practical implementation of both JWT secure and refresh tokens can be seen in these 2 courses:
Here is how to create a simple application with the React front-end framework:
Setup the project:
sudo npm i -g create-react-app // install the dependencies npx create-react-app my-react-app // create the initial application npm start //start the live development server
App.js import React from 'react'; import './App.css'; import Login from './loginComponent'; //default import import {UsersList} from './usersList'; // specific import
const App = () => { // double curly braces because of passing object and because of passing property return ( <div className="App"> <Login user={{ name: "John", uid: 1000 }} /> <header className="App-header"> <UsersList users = {users} /> </header> </div> ); }
export default App;
usersList.js import React from 'react'; import {UsersListItem} from './usersListItem'; // specific import
export const UsersList = ({ users }) => // getting especially users array from the passed array with props ( // with () we return automatically instead of writing {} <> { users.map(user => <UsersListItem user={user} key={user.name} /> ) } </> ); // React will be used when we return react fragment
loginComponent.js import React from 'react'; // show the import, conditionals and DOM element, also the export // how to display props, destructurise in the passing parameters(props)
For Firebase you'll need to install the following schematics: ng add @angular/fire
then just do: ng deploy
you'll be probably asked to authenticate with password in browser, and then your project will be on Internet.
If you would like to youse serverless functions for NodeJS interpretation here is the way: sudo npm install -g firebase-tools
firebase init functions
This will install and initialize the functions. Then go to the newly created /functions directory and install your packages such as: npm install nodemailer cors etc.
And now is time to edit the auto-generated index.js file.
When you are happy with the generated function you can deploy it, just run from the same directory:
firebase deploy
For Vercel, after the registration just link your github repository to Vercel. You can see/edit your current local git configuration with:
git config --local -e
To link the remote origin of your repository to the local git repo use:
First lets install lxd in our system: sudo snap install lxd
Then initialize the basic environment: sudo lxd init
We will also fetch image from a repository: linuxcontainers.org
and will start a container based on it: sudo lxc launch images:alpine/3.10/amd64 webdevelopment
Let's see what we have in the system: sudo lxc ls sudo lxc storage ls sudo lxc network ls
Now it is time to access the container with: sudo lxc exec webdevelopment sh and then we will use apk to install openssh apk add openssh-server lets' also add unprivileged user in order to access the ssh: adduser webdev we will also start the server:
service sshd start
Ok let's check with: ip a the address of the container.
Now we exit the shell(sh) and we can connect to the container using our new user: ssh webdev@ip address of container
Alright, now go back inside the container and will add the Apache service: apk add apache2 service apache2 restart
Optional:
If we need to get rid of the container we need to stop it first: sudo lxc stop demo sudo lxc delete demo
If we need to get rid of the created storage pool, we run the following: printf 'config: {}\ndevices: {}' | lxc profile edit default lxc storage delete default
If we need to remove the created network bridge we can run: sudo lxc network delete lxdbr0
We need fist to have mysql-server installed, where phpmyadmin will store its data. For this reason we will run: sudo apt install mysql-server
Then some libraries for the functioning of phpmyadmin as well as the phpmyadmin package: sudo apt install phpmyadmin php-mbstring php-zip php-gd php-json php-curl php libapache2-mod-php Note: if there is a problem in the installation you can Ignore, or Abort the configuration of phpmyadmin.
Let's now go and login inside of MySQL as root: sudo mysql -u root
or if you already have password/user then: login with: sudo mysql -u user -p
Next we will adjust the MySQL root password, as well as its method of authentication: ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
Optional:
Configure Apache in order to serve phpmyadmin (if not already done by installation of phpmyadmin): inside of etc/apache/conf-available/ we create the following phpmyadmin.conf file: Alias /phpmyadmin /usr/share/phpmyadmin <Directory /usr/share/phpmyadmin/> AddDefaultCharset UTF-8 <IfModule mod_authz_core.c> <RequireAny> Require all granted </RequireAny> </IfModule> </Directory>
Lastly, we need to activate the above configuration file with: a2enconf phpmyadmin.conf and then restart the apache2 service to reload and accept the changed configuration: sudo systemctl restart apache2.service
Now is time to open up in the browser to: http://127.0.0.1/phpmyadmin and use the combination that we already set: root / password
