How to do session management in react js app with flask as backend?

Question

Hello I am working on a web app created using create-react-app. I am using flask as backend. in flask I am using CORS and cross_origin. My app is as follows

import random
from flask import Flask, request, session, jsonify, Response
from dbconnect import POD_Admin_DB as dbAdmin 
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)
otp = "000000"
app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'

@app.route('/api/requestOTP',methods=["POST", "OPTIONS"])
@cross_origin(supports_credentials=True)
def pod_requestOTP():
    print('requestOTP')    
    session['otp']=generate_code()
    print((session))
    print (session['otp'])
    #userPhone=request.json['userPhone']
    return session['otp']

@app.route('/api/verifyOTP',methods=["POST","OPTIONS"])
@cross_origin(supports_credentials=True)
def pod_verifyOTP():
    if request.method =="OPTIONS":
        print("here")
        return Response(headers={"Content-Type": "application/json charset=utf-8",
        "Allow": "POST, OPTIONS",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Content-Type",
        "Access-Control-Allow-Methods": "DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT"
        })
    elif request.method == "POST":

        print("verifyOTP")
        print((session))
        #print(dir(request))
        print(request.data)
        otp = request.json['pod_Otp']
        print((otp))

        userPhone=request.json['userPhone']   
        print(userPhone)    
        if otp == session['otp']:
            print("otp matched")
            dbAdmin.connectToDb()
            dbAdmin.isClientAlreadyRegistered(userPhone)
            return jsonify({"ok":"success"})
        else:
            print("otp not matching")
            return jsonify({"Notok":"success"})

#some method that generates my otp
#def otp_generationMethod():
    ###code

this is my flask code. I access these both routes from my react app. Everytime when I fetch the pod_verifyOTP() method after requestOTP() from my session from flask becomes empty. I searched many references for this problem but could not fix this. How should I maintain this session?

As docs says: A session makes it possible to remember information from one request to another. The way Flask does this is by using a signed cookie. Is your cookie stored properly on react side? — bc291
– bc291, Commented Jan 7, 2020 at 10:22

Prachi Joshi · Accepted Answer · 2020-01-28 14:36:15Z

1

This is how I did it: The changes I made into above code are as follows: I imported flask_session

from flask_session import Session

assigned session type as "filesystem"

SESSION_TYPE = 'filesystem'

and then added the app into session s follows like added it into CORS

SESSION_TYPE = 'filesystem'
app.config.from_object(__name__)
Session(app)
CORS(app)

And I got the desired output.

answered Jan 28, 2020 at 14:36

Prachi Joshi

3751 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to do session management in react js app with flask as backend?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related