【3.ユーザ登録編】Ruby on Rails + ReactでSNSアプリを作る

bundle install

rails g devise:install 

rails g devise_token_auth:install User auth

config.change_headers_on_each_request = true

rails g devise:i18n:locale ja

1require_relative "boot"
2
3require "rails"
4# Pick the frameworks you want:
5require "active_model/railtie"
6require "active_job/railtie"
7require "active_record/railtie"
8require "active_storage/engine"
9require "action_controller/railtie"
10require "action_mailer/railtie"
11require "action_mailbox/engine"
12require "action_text/engine"
13require "action_view/railtie"
14require "action_cable/engine"
15# require "sprockets/railtie"
16require "rails/test_unit/railtie"
17
18Bundler.require(*Rails.groups)
19
20module TodoApi
21  class Application < Rails::Application
22    config.load_defaults 6.1
23    config.time_zone = 'Tokyo'
24    config.i18n.default_locale = :ja
25    config.api_only = true
26  end
27end
28

1class Api::V1::Auth::RegistrationsController < DeviseTokenAuth::RegistrationsController
2  def render_create_success
3    auth_token = @resource.create_new_auth_token
4    render json: {
5      data: resource_data(resource_json: @resource.token_validation_response),
6      access_token: auth_token['access-token'],
7      client: auth_token['client'],
8      uid: auth_token['uid'],
9    }
10  end
11
12  def sign_up_params
13    params.permit(:name, :email, :password, :password_confirmation)
14  end
15end

1Rails.application.routes.draw do
2  namespace :api do
3    namespace :v1 do
4      mount_devise_token_auth_for 'User', at: 'auth', controllers: {
5        registrations: 'api/v1/auth/registrations',
6      }
7      
8      resources :categories, only: [:index, :create]
9      resources :memos, only: [:create]
10    end
11  end  
12end
13

rails generate migration AddUserIdToMemos user:references

rails generate migration AddUserIdToCategories user:references

rails db:migrate:reset

1# frozen_string_literal: true
2
3class User < ActiveRecord::Base
4  # Include default devise modules. Others available are:
5  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
6  devise :database_authenticatable, :registerable,
7         :recoverable, :rememberable, :validatable
8  include DeviseTokenAuth::Concerns::User
9
10  has_many :categories
11  has_many :memos
12end
13

1class Memo < ApplicationRecord
2  belongs_to :category
3  belongs_to :user
4  validates :category, :content, presence: true
5end
6

1class Category < ApplicationRecord
2  has_many :memos
3  belongs_to :user
4  validates :name, presence: :true
5end
6

1import React, { useState } from 'react';
2import {
3  Box,
4  Input,
5  Button,
6  Center,
7} from "@chakra-ui/react";
8import { useToast } from "@chakra-ui/react";
9import axios from 'axios';
10
11export default function UserRegist() {
12  const [ name, setName] = useState('');
13  const [ email, setEmail ] = useState('');
14  const [ password, setPassword ] = useState('');
15  const [ password_confirmation, setPasswordCofirmaiton ] = useState('');
16  const [isLoading, setIsLoading] = useState(false);
17  const toast = useToast();
18
19  async function fetchCreateUser() {
20    setIsLoading(true);
21
22    try {
23      if (!name || !email || !password || !password_confirmation) {
24        toast({
25          title: '名前、メールアドレス、パスワードを入力をして下さい。',
26          status: 'error',
27          isClosable: true,
28        });
29
30        return;
31      }
32
33      const res = await axios.post("http://localhost:3010/api/v1/auth", {
34        name, email, password, password_confirmation
35      });
36
37      if (!res.status || (res.status < 200 && res.status >= 300)) {
38        throw new Error(`HTTP error! status: ${res.status}`);
39      }
40
41      localStorage.setItem('access-token', res.data['access_token']);
42      localStorage.setItem('client', res.data['client']);
43      localStorage.setItem('uid', res.data['uid']);
44
45      console.log(localStorage.getItem('access-token'));
46      console.log(localStorage.getItem('client'));
47      console.log(localStorage.getItem('uid'));
48
49      toast({
50        title: '新規登録しました。',
51        status: 'success',
52        isClosable: true,
53      });
54    }
55    catch (error) {
56      console.error('Error creating credos:', error);
57      toast({
58        title: '新規登録に失敗しました。',
59        status: 'error',
60        isClosable: true,
61      });
62    }
63    finally {
64      setIsLoading(false);
65      setName('');
66      setEmail('');
67      setPassword('');
68      setPasswordCofirmaiton('');
69    }
70  }
71  
72  return (
73    <Center>
74      <Box w={["100%", "90%", "80%", "70%", "60%"]} mt={["50px", "100px", "150px", "200px"]}>
75        <Input
76          value={name}
77          onChange={(e) => setName(e.target.value)}
78          placeholder="名前を入力" 
79        />
80        <Input
81          mt="6px"
82          value={email}
83          onChange={(e) => setEmail(e.target.value)}
84          placeholder="Eメールを入力" 
85        />
86        <Input
87          mt="6px"
88          type='password'
89          value={password}
90          onChange={(e) => setPassword(e.target.value)}
91          placeholder="パスワード" 
92        />
93        <Input 
94          mt="6px"
95          type='password'
96          value={password_confirmation}
97          onChange={(e) => setPasswordCofirmaiton(e.target.value)}
98          placeholder="パスワード（確認用）" 
99        />
100        <Center>
101          <Button mt="6px" onClick={fetchCreateUser} isLoading={isLoading} disabled={!name || !email || !password || !password_confirmation}>送信</Button>
102        </Center>
103      </Box>
104    </Center>
105   );
106 }