Slim 3 how to save JWT Token on local storage and use it in my routes for authentication

Question

I want to implement jwt authentication for slim app, i followed tuupora's PRS7 jwt authentication middleware and its working fine when i use Postman because there are options to use header as "Authorization: Bearer tokenString" as here bellow when i request "/auth/ibice" route these returned data are protected by the middleware-- screenshot

and am using the token string that returned when i request this route "/authtoken" as you see it bellow

{
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ3d3cuYXNpZC5ydyIsImlhdCI6MTQ4Njk5MjcyNCwiZXhwIjoxNDg4Mjg4NzI0LCJjb250ZXh0Ijp7InVzZXIiOnsicGhvbmVubyI6IjA3ODQyMjY4OTUiLCJ1c2VyX2lkIjoiMSJ9fX0.1kFu4A16xxJriaRA9CccIJ3M9Bup06buK2LAh13Lzy4",
  "user_id": "1"
}

this my middleware.php that protect all routes of "/auth/"

<?php
// Application middleware
$container["jwt"] = function ($container) {
    return new StdClass;
};

    $app->add(new \Slim\Middleware\JwtAuthentication([
        "environment" => "HTTP_X_TOKEN",
        "header" => "Authorization",
        "path" => ["/auth"],
        "passthrough" => ["/authtoken"],
        "secret" => "your_secret_key",
        "error" => function ($request, $response, $arguments) {
                $data["status"] = "error";
                $data["message"] = $arguments["message"];
                return $response->withStatus(401)
                    ->withHeader("Content-Type", "application/json")
                    ->write(json_encode($data, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT));
            },
          "callback" => function ($request, $response, $arguments) use ($container) {
          $container["jwt"] = $arguments["decoded"];
        }
    ]));

and my routes that i want to request with authorization header that is stored either from cookie or local storage but i have no idea how to do that!!

$app->group('/auth',function(){

 $this->get('/admin','App\Controllers\apiController:login')->setName('admin');   

//fetch ibice 
$this->get('/ibice','App\Controllers\apiController:ibice')->setName('Ibice');

//fetch ibice by id
$this->get('/igice/{id}', 'App\Controllers\apiController:igice')->setName('igiceId'); 

//search ibice
$this->get('/igice/search/[{query}]', 'App\Controllers\apiController:igice_search')->setName('Igice Search');

//imitwe igize igice
$this->get('/igice/{id}/imitwe','App\Controllers\apiController:imitwe')->setName('Imitwe');

//ingingo ziherereye mumutwe runaka
$this->get('/umutwe/{id}/ingingo', 'App\Controllers\apiController:ingingoBundle')->setName('Ingingo.bundle');

//ingingo ziri mucyiciro runaka
$this->get('/ingingo/icyiciro/{id}', 'App\Controllers\apiController:allstuff')->setName('Icyiciro');

//kuzana ikibazo kimwe kiri mungingo runaka
$this->get('/ingingo/{ingingoid}/question/{id}', 'App\Controllers\apiController:question')->setName('One_Exercise');

//kuzana ibibazo byose biri mungingo 
$this->get('/ingingo/{ingingoid}/questions', 'App\Controllers\apiController:questions')->setName('One_Exercise');

 //check if the answer is True or False
$this->get('/question/{id}/check/[{query}]','App\Controllers\apiController:checkQuestions')->setName('Check_Questions');

//get questions ids from ingingo
$this->get('/question/{ingingoid}','App\Controllers\apiController:questionsIDs')->setName('Check_Questions');
});

please help me i have no idea how to do this !!

Mucyo Fred · Accepted Answer · 2017-02-15T01:17:51.323

I have never used Slim before but Maybe You can use little Javascript to access localstorage bcz you can't access local storage with php (php works on server side) while localstorage is in browser(client side) here there steps you can do first get Auth token with php by hitting this /authtoken endpoint $app->get('/authtoken') then you need to json_decode returned json into php array then if suppose your php array containing token is $arr then you can you little javascript to save that token in localstorage likes this <script>localStorage.setItem('token', '<?php echo $arr['token'];?>');</script> then whenever you want to read it also you can use javascript to read it from localstorage

<?php
$token = "<script>document.write(localStorage.getItem('token'));</script>"; ?>

thx man!! am gonna give it a try but the only problem left is to send request that contains Header like Authorization: Bearer — frontendkiller, Feb 15 '17 at 07:18

Slim 3 how to save JWT Token on local storage and use it in my routes for authentication

1 Answers1