DEV Community: Rana Wael

Domain Name vs. Web Hosting

Rana Wael — Tue, 05 Sep 2023 08:58:10 +0000

Before comparing them, we need to define some abbreviations.

What does "IP" mean?

An IP is a unique address that identifies a device on the internet or a local network. It is responsible for routing packets to their correct destinations over the internet.

What is a Domain Name?

A domain name is a uniquely human-readable name used to identify a website (e.g., google.com).

What does "DNS" mean?

DNS stands for the Domain Name System, which is responsible for translating domain names into IP addresses. A computer sends a DNS query to a DNS server, which returns the corresponding IP address.

What is a Host?

A host is any computer that has full two-way access to other computers on the internet.

What is the meaning of Web Hosting?

Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website. We refer to web hosting as the home of your website. This means it is a physical server connected to the internet that store website data.

Domain Name vs. Web Hosting:

When you buy a domain name you just buy an address IP for yourself
Web hosting is what allows you to set up the website (make it visible across the internet)
If you buy a domain name but you don't get hosting, you just type your domain name, you will see locked screen indicating that the IP address is parked but not active, So in order to go live you need web hosting

The main difference between a domain name and hosting is that domain name is the address, which allows a visitor to easily find your website online, while hosting is where the website files are stored.

Django Authentication for APIs

Rana Wael — Sun, 03 Sep 2023 14:37:49 +0000

1. Use rest_framework

Used for the response "instead of regular json response"

Installation

Install package pip install djangorestframework

Then add in settings

INSTALLED_APPS = [
    ...
    'rest_framework',
]

2. Use simple jwt

To deal with authentication with access and refresh token

Installation

install pacakge pip install djangorestframework-simplejwt

Then add in settings:

REST_FRAMEWORK = {
    ...
    'DEFAULT_AUTHENTICATION_CLASSES': (
        ...
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    )
    ...
}

Steps:

Use these endpoints to get the access and refresh tokens

path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair')

This api is post method to login with user then gives us the access and refresh tokens

Access token store info. about the user that is encoded

path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh')

This api is post method to give it the refresh token then generates and gives us the new access token

Customize jwt

SIMPLE_JWT = {
    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=5),
 #Custom the lifetime of access token
    "REFRESH_TOKEN_LIFETIME": timedelta(days=1),
# Custom the lifetime of refresh token
  ....
}

SIMPLE_JWT = {
  ....
"ROTATE_REFRESH_TOKENS": True,
...
}

Use it when we need the user stay logged in even if the refresh token is expired (stay logged in if the user still opened the browser)

Generate new refresh token every time using refresh token api (to generate new access token)

Create rolling window and generate new refresh token

When making this boolean value (True), the endpoint of refresh token will give response new access and refresh tokens instead of new access token only

SIMPLE_JWT = {
  ....
 "BLACKLIST_AFTER_ROTATION": True
  ...
}

Use it when using ”ROTATE_REFRESH_TOKENS” to block the old refresh tokens when generate new refresh token (to use the new refresh token only and block the old ones)

You need to add 'rest_framework_simplejwt.token_blacklist', to your INSTALLED_APPS in the settings file to use this setting

Customize Token Claims

Used to customize the decoded token returned to the user (more information about him)

from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
from rest_framework_simplejwt.views import TokenObtainPairView


class MyTokenObtainPairSerializer(TokenObtainPairSerializer):
@classmethod
def get_token(cls, user):
  token = super().get_token(user)
  # custom claims
  token['username'] = user.username

return token

class MyTokenObtainPairView(TokenObtainPairView):
  serializer_class = MyTokenObtainPairSerializer

3. Use CORS

Adds cross origin resource sharing(cors) headers to responses
It allows our resources to be accessed on other domains

Installation

Install pacakge python -m pip install django-cors-headers

Then add to settings:

INSTALLED_APPS = [
    ...,
    "corsheaders",
    ...,
]
...
MIDDLEWARE = [
    ...,
    "corsheaders.middleware.CorsMiddleware",
    "django.middleware.common.CommonMiddleware",
    ...,
]
CORS_ALLOW_ALL_ORIGINS= True # To make any domain can access our project
## or
CORS_ALLOWED_ORIGINS = [‘allowed_urls‘, ...] # List of urls that we want to allow to our api

React useContext()

Rana Wael — Thu, 31 Aug 2023 19:33:24 +0000

Is a way to manage state globally. It is used with the useState Hook to share state between deeply nested components more easily than with useState alone (prop drilling). We can create different types of context that like different stores

const UserContext = createContext() // use UserContext as Provider to wrap the tree of components that need the state Context
function Component1() { 
  const [user, setUser] = useState("Rana"); 
  return (
    <UserContext.Provider value={user}>
    <Component2 user={user}/> 
    </UserContext.Provider>
  ); 
}
//Then in any child component call this context to access its values 
const user = useContext(UserContext)

Note:

Provider: provides the information

Consumers: receive the information